Записки HTML-верстальщика: выжимаем максимум из селекторов CSS или правильное обращение с ними

Всем добрый день! 

Если Вы еще не в курсе - завтра 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>)

На этом всё, господа и дамы. Есть еще целый блок псевдоселекторов, которые очень облегчают жизнь верстальщикам, однако, это большая тема, и её секретики я расскажу в следующей своей статье.

 

Спасибо за внимание :)   

Буду рад ответить всем на Ваши вопросы, буду рад видеть всех и каждого у себя в подписчиках, буду признателен за Ваши лайки и отзывы.