Список полезных селекторов CSS.

Вот ТОП-10 CSS селекторов, которые необходимо знать верстальщику. Больщинство из них я постоянно использую.

1&nbsp;<strong>.class :first-child{ color:green;}&nbsp;</strong>

Использование псевдокласса :first-child для стилизации первого потомка  у своего родителя.

2. .class :nth-child(2){ color:green;}  

Используем когда нужно обратиться к n-му по порядку элементу — потомку. Необходимо использовать целое число в качестве параметра.

Например, если нужно выбрать третий элемент с классом class и окрасить его тексовое содержимое в зеленый цвет, необходимо использовать конструкцию.

.class :nth-child(3){ color:green;}

Самое распространенное заблуждение относительно селекторов :last-child, :first-child, nth-child(), их пытаются применить к родителю элементов.

Например для выделения пункта меню пытаются применить свойство в списке к <ul> чтобы обратиться к первому или последнему элементу.

Помните! данные селекторы необходимо применять к потомкам. Тоесть для того чтобы обратиться к последнему элементы в списке пишем li:last-child{ color:green;}

3. li:not(.class){color:green}

Селектор :not считается не однозначным в использовании.

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

Например обратимся к списку без класса или пункам этого списка:

ul:not([class]) li

4. div[class^="block"]{ color:black;} 

Опишу что будет происходить после применения данного правила. На странице выберутся все <div>  с классами которые начинаются на «block».

В данном случае ‘^’ указывает на «начало».  Очень распространенный пример использования селектора по атрибуту  a[href^=»https»]{/*наводим красоту*/} тут понятно что стили применятся к ссылкам на странице атрибут ‘href’ которых начинается с ‘https’.

5. Если вы используетете, а я надеюсь что это так, именование по БЭМ  вы найдете применение такому правилу как обращение к элементу по части атрибута.

div[class*="panel"]{ color:black;}

Данное правило означет что часть наименования класса может находиться совершенно в любой части атирбута class. таким образом это может быть как

 <div class="newbuilding-panel"></div>так и<div class="newbuilding-panel__bottom"></div><div class="newbuilding-panel__top"></div>

6. .class:only-child{/*необходимые стили*/}

Используя псевдо класс :only-child.

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

Когда например у вас может быть один абзац текста в блоке или несколько таких абзацев.  И оформление может меняться в зависимости от содержимого. При чем только с помощью великой силы каскадных таблиц.

Опишу еще несколько основных но не теряющих свою актуальность селекторов.

7. Селектор * {/*наводим красоту*/}

Позволяет обратиться ко всем элементам на странице. Самое частое использование данного селектора — это обнуление стилей у элементов на странице. Кстати данный селектор можно использовать и так: Например div  *{color:green;}  обращаемся ко всем дочерним элементам блока <div></div>  и меняем цвет на зеленый.

8. .class > p{ color:green; }

Непосредственные потомки div. Признаюсь я не испотзую обращение к потомкам родителя через ‘>’ всегда пишу просто .class p{/* необходимые стили*/}  тоесть через пробел.

За четыре года работы верстальщицей не было такого случая чтобы понадобился именно такой способ обращения к потомку элемента, как запись через «>».

9.  .class + p {/* наши красочные стили*/}

Стили применятся к первому соседу на том же уровне вложенности, который идет сразу после .class Будете ли вы использовать данный способ обращения к элементу, покажет практика.

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

10. Псевдоэлементы которые помогут обратиться к однотипным элементам тоесть выбрать только элементы подходящие по условию, игнорируя элементы с другим тегом:

:first-of-type :last-of-type 

1
:only-of-type

 и им подобные.

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

Изучая лучшие практики верстки, вы поймете что оставлять элементы без классов это нехорошо. А если у элемента есть класс то и обратиться к нему проще напрямую. Но плодить лишние классы тоже ай-ай-ай!! Бывают случаи когда добавить классы на элементы проблематично или невозможно нормальным способом, тогда на помощь приходить вся сила и мощь псевдоклассов и псевдоэлементов CSS.