Советы и хитрости, чтобы сэкономить ваше время и код
Выбор нескольких элементов для применения одного и того же CSS
.random-class__content1, .random-class__content2, .random-class__content3
Раньше я писал n отдельных классов CSS, но знаете что? Этот селектор можно применить к нескольким классам, если вы укажете эти классы CSS и соедините их с помощью запятых.
Выбор прямого потомка элемента
.random-class__content > a
Бывают случаи, когда вы просто хотите применить CSS ко всем тегам привязки, которые находятся в определенном классе, вместо того, чтобы настраивать таргетинг на все теги привязки.
Это часто путают со следующим:
.random-class__content .a
Но они разные.
Селектор #random-container > ul будет нацеливаться только на ul, которые являются прямым потомком div с id из random-container. Он не будет нацелен на ul, который является дочерним по отношению к первому li , в то время как #random-container ul will.
Выбор элемента с N классами
.random-class1.random-class2
Это (да, без пробела) позволит вам выбрать только элемент, к которому применены оба класса. Учтите следующее:
<div class="random-class1 random-class2"></div>
<div class="random-class1"></div>
<div class="random-class2"></div>Вы сможете выбрать только элемент, к которому применены оба указанных класса.
Выбор элемента Y, который находится непосредственно после элемента X
.random-class__content +.random-class__content2
Это означает, что CSS будет применяться только ко всем .random-class_content2 после .random-class_content. Если есть автономный .random-class_content2 , который, например, стоит после .random-class_content, тот же CSS не будет применяться.
Это часто путают со следующим.
.random-class__content ~ .random-class__content2
Но они разные.
Учтите следующее:
<div class="random-class_content"/> <div class="random-class_content2"/> <div class="random-class_content3"/> <div class="random-class_content2"/>
Селектор #random-class_content+.random-class_content2 будет нацеливаться только на элемент сразу после div с class равным random-class_content. Он не будет нацелен на random-class_content2, который находится сразу после random-class_content3, в то время как #random-class_content~.random-class_content2 будет.
Выбор элементов, которые не являются первым элементом
.random-class__content:not(:first-child)
Это означает, что, учитывая следующее, приведенный выше CSS будет применяться только ко второму, третьему и четвертому div и будет удобно пропускать первый в списке.
<div class="random-class_content"/> <div class="random-class_content"/> <div class="random-class_content"/> <div class="random-class_content"/>
Надеюсь, вы кое-что узнали! Удачного обучения!
