Главная

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

2019-12-14 в 15:51, admin, рубрики: css, перевод, селекторы

Привет!

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

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

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


<p>
    <a><b></b></a>
</p>
```
div +a
При этом будут выбраны а-теги, размещенные сразу после div элемента. Если между div тегом и а тегом стоит элемент, этот элемент не будет использован.
```
<main>

    <div></div>
    <a></a>

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

    <div></div>
    <a></a>

    <div></div>
    <p></p>
    <a></a>
    <section>

    <div></div>
    <p></p>
    <a></a>
    </section>

    <footer>

    <p></p>
    <a></a>
    </footer>
</main>
```

[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>

[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>

[attribute*=value]
Например: [class*="-list"].

Этот селектор будет выбирать каждый элемент, class атрибут которого содержит -list. Это не рассматривается, если -list стоит в начале, середине или в конце значения класса.Главное, чтобы значение включало в себя -list
```
<main>

    <div class="main-list-container"></div>

    <div class="primary-list"></div>

    <div class="primary-list-item"></div>

    <div class="list-footer"></div>
</main>
```

Вывод

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

Автор: AlTaaab

Источник