Всем добрый день!
Если Вы еще не в курсе - завтра 14 февраля, а это значит, что вторые половинки ждут Вашего повышенного внимания...но это завтра :), а сегодня я хотел бы поведать еще один лайфхак для разработчиков сайтов: как можно использовать селекторы CSS максимально эффективно.
В начале, хотелось бы провести небольшой ЛикБез по определению самого термина "Селектор" - это элемент, который мы собираемся стилизовать, или к которому будут применяться все написанные CSS-свойства.
So, какие же есть варианты использования и комбинирования селекторов:
- p {color:white;} самый простой способ указать всем элементам <p></p> белый цвет
- div p {color:white;} - белыми станут все <p></p> внутри элементов <div></div>
- .first {color:white;} - здесь мы покрасим в белый цвет все элементы, у которых будет задан класс first: к примеру, <div class="first"></div> или <p class="first"></p>
- #first {color:white;} - здесь мы обращаемся к элементу с ID first и даём ему белый цвет: к примеру, <div id="first"></div> или <p id="first"></p>
- div.first {color:white;} - здесь мы покрасим в белый только элементы div, у которых будет задан класс first: к примеру, <div class="first"></div>
- div#first {color:white;} - a здесь только элементы div с ID first: к примеру, <div id="first"></div>
- * {color:white;} - универсальный селектор, который покрасит в белый цвет все теги, существующие на странице
Нестандартные селекторы:
- div > p {color:white;} - белыми станут только те <p></p>, которые будут находиться на первом уровне вложенности после элементов <div></div>. Если внутри <div> будет еще какой-нибудь тег <span>, а внутри него <p> - этот элементы белым не станет
- div + p {color:white;} - белыми станут только тот <p></p>, который будет находиться сразу после <div></div>
- div ~ p {color:white;} - белыми станут все <p></p>, которые будут находиться сразу после <div></div>
Селекторы атрибутов:
- div[align] {color:white;} - побелеют теги div, у которых есть атрибут align
- div[align="center"] {color:white;} - побелеют теги div, где значение атрибута align равно center
- div[align^="center"] {color:white;} -- белыми станут теги div, где значение атрибута align начинается на center
- div[align*="center"] {color:white;} - побелеют теги div, где значение атрибута align содержит center
- div[class~="first"] {color:white;} - побелеют теги div, где first может находиться среди других слов, отделенных пробелами (<div class="my first class"></div> или содержащих текст в кавычках<div class="first4"></div>, <div class="first5"></div>)
- div[class|="first"] {color:white;} - белыми станут теги div, где значение атрибута class состоит только из слова first или начинается им, после чего ставится дефис и пишется остальная часть значения (<div class="first-On"></div> или <div class="first-off"></div>)
- div[class$="first"] {color:white;} - побелеют теги div, где значение атрибута align заканчивается на first (<div class="On-first"></div> или <div class="Off-first"></div>)
На этом всё, господа и дамы. Есть еще целый блок псевдоселекторов, которые очень облегчают жизнь верстальщикам, однако, это большая тема, и её секретики я расскажу в следующей своей статье.
