6 мощных селекторов CSS, которые действительно помогут вам написать чистый CSS

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

Предлагаю вашему вниманию перевод статьи «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-файл работает на высокой скорости. И использование такого рода селекторов полезно в зависимости от случая использования.