- PVSM.RU - https://www.pvsm.ru -
Привет!
Предлагаю вашему вниманию перевод статьи «6 powerful CSS selectors that will really help you write clean CSS [1]» автора Ibrahima Ndaw.
Селекторы в CSS используются для выбора элементов и стиля. Селекторы производительны и поэтому пользуются популярностью у разработчиков. В этой статье приведены 6 селекторов CSS, которые помогут написать чистый CSS в вашем следующем проекте (если, конечно, вы его используете).
Этот селектор позволит выбрать а-элементы, где родительский элемент будет div тегом.
<!-- This one will be selected -->
<div>
<a></a>
</div>
<!-- This one will not be selected -->
<p>
<a><b></b></a>
</p>
При этом будут выбраны а-теги, размещенные сразу после 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>
Это селектор будет выбирать каждый 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>
Например: [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>
Например: [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>
Например: [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-файл работает на высокой скорости. И использование такого рода селекторов полезно в зависимости от случая использования.
Автор: AlTaaab
Источник [2]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/css/339973
Ссылки в тексте:
[1] 6 powerful CSS selectors that will really help you write clean CSS: https://dev.to/ibrahima92/6-powerful-css-selectors-that-will-really-help-you-write-clean-css-4bab
[2] Источник: https://habr.com/ru/post/480286/?utm_source=habrahabr&utm_medium=rss&utm_campaign=480286
Нажмите здесь для печати.