Хабрахабр

[Из песочницы] 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 элементу, но имеет div тег в качестве одноуровнего элемента, этот элемент будет выбран. Это селектор будет выбирать каждый a тег, предшествующий 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"].

    Это не рассматривается, если -list стоит в начале, середине или в конце значения класса.Главное, чтобы значение включало в себя -list Этот селектор будет выбирать каждый элемент, class атрибут которого содержит -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-файл работает на высокой скорости. И использование такого рода селекторов полезно в зависимости от случая использования.

Показать больше

Похожие публикации

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Кнопка «Наверх»