Привет, Хабр!

Предлагаю вашему вниманию перевод статьи «6 powerful CSS selectors that will really help you write clean CSS» автора Ibrahima Ndaw.

Селекторы в CSS используются для выбора элементов и стиля. Селекторы производительны и поэтому пользуются популярностью у разработчиков. В этой статье приведены 6 селекторов CSS, которые помогут написать чистый CSS в вашем следующем проекте (если, конечно, вы его используете).

1. div >a
   
   Этот селектор позволит выбрать а-элементы, где родительский элемент будет div тегом.
   
   

   <!-- This one will be selected --> 
   <div>
       <a></a>
   </div>
   
   <!-- This one will not be selected -->
   <p>
       <a><b></b></a>
   </p>

2. div +a
   
   При этом будут выбраны а-теги, размещенные сразу после div элемента. Если между div тегом и а тегом стоит элемент, этот элемент не будет использован.
   
   

   <main>
   <!-- This one will be selected -->
       <div></div>
       <a></a>
   <!-- This one will be not selected -->
       <div></div>
       <p></p>
       <a></a>
   </main>

3. div ~a
   
   Это селектор будет выбирать каждый a тег, предшествующий div элементу на том же уровне. Другими словами, если a тег не предшествует непосредственно div элементу, но имеет div тег в качестве одноуровнего элемента, этот элемент будет выбран.
   
   

   <main>
   <!-- This one will be selected -->
       <div></div>
       <a></a>
   <!-- This one will be selected -->
       <div></div>
       <p></p>
       <a></a>
       <section>
   <!-- This one will be selected -->
       <div></div>
       <p></p>
       <a></a>
       </section>
   
       <footer>
   <!-- This one will be not selected -->
       <p></p>
       <a></a>
       </footer>
   </main>

4. [attribute^=value]
   
   Например: [class =«list-»]
   
   Этот селектор будет выбирать каждый элемент, содержащий class атрибут, где значение начинается с list-
   
   

   <main>
   <!-- This one will be selected -->
       <div class="list-element"></div>
   <!-- This one will be selected -->
       <div class="list-container"></div>
   <!-- This one will be selected -->
       <div class="list-item"></div>
   <!-- This one will be not selected -->
       <div class="list__footer"></div>
   </main>

5. [attribute$=value]
   
   Например: [src$=".png"]
   
   Это селектор будет выбирать каждый src атрибут, где значение заканчивается .png
   
   

   <div>
   <!-- This one will be selected -->
       <img src="image1.png">
   <!-- This one will be not selected -->
       <img src="image2.jpg">
   <!-- This one will be selected -->
       <img src="image3.png">
   <!-- This one will be not selected -->
       <img src="image4.svg">
   </div>

6. [attribute*=value]
   
   Например: [class*="-list"].
   
   Этот селектор будет выбирать каждый элемент, class атрибут которого содержит -list. Это не рассматривается, если -list стоит в начале, середине или в конце значения класса.Главное, чтобы значение включало в себя -list
   
   

   <main>
   <!-- This one will be selected -->
       <div class="main-list-container"></div>
   <!-- This one will be selected -->
       <div class="primary-list"></div>
   <!-- This one will be selected -->
       <div class="primary-list-item"></div>
   <!-- This one will be not selected -->
       <div class="list-footer"></div>
   </main>

Вывод

Иногда сложно найти необходимый элемент для стиля, потому что CSS-файл работает на высокой скорости. И использование такого рода селекторов полезно в зависимости от случая использования.