Это определение действует только для конкретного тега, для которого оно описано. Способ не рекомендуется к использованию.
Это наименее рекомендуемый способ, связанный с рядом проблем (включая проблемы с производительностью)
Это наиболее рекомендуемый способ, отделяющий разметку от стилей.
5. Селектор атрибутов ( [attr] )
[title] {} - применяется ко всем элементам, имеющим атрибут title.
Селекторы атрибутов имеют как ряд особенностей, так и ряд дополнительных возможностей. Помимо проверки на наличие атрибута можно проверять его на равенство некоторой величине:
Селектор атрибутов со строгим равенством. Выбираются все элементы, имеющие атрибуты с некоторым строго определенным значением:
[attr=value]
id и классы являются атрибутами, поэтому фактически, вместо селекторов id и класса можно использовать следующие конструкции:
[id="#idname"] [class="className"]
хотя так писать не принято.
Селекторы атрибутов с регулярными выражениями. Выбираются элементы, имеющие атрибуты со значениями, соответствующими некоторому регулярному выражению:
[attr*=value] - значение атрибута attr содержит подстроку value
[attr^=value] - значение атрибута attr начинается с подстроки value
[attr$=value] - значение атрибута attr заканчивается подстрокой value
[attr~=value] - атрибут находится в списке, разделённом пробелами
[attr|=value] - атрибут находится в списке, разделённом дефисами
Последние два типа селекторов, в принципе, могут быть заменены селектором *=, однако они являются более специфичными и исключают ложные срабатывания.
6. Селекторы псевдоклассов ( :class )
7. Селекторы псевдоэлментов ( ::element )
Теоретически могут использоваться самостоятельно, но практически всегда используются в комбинации с селектором типа. Псевдоэлементы по стандарту используют двойное двоеточие, однако т.к. старые версии IE его не поддерживают, лучше использовать одинарное двоеточие.
8. Селектор группировки ( s1, s2, s3 )
ul, .box, #navbar {} - применяется ко всем элементам с типом ul или с классом .box или с id === #navbar. (
Или в определении не исключающее).
9. Селектор мультикласса (.class1.class2.class3)
Каждый тег может иметь несколько классов, имена которых разделены пробелами. Селектор мультикласса применяется только к тем элементам, которые содержат имена всех классов, перечисленных в селекторе:
.class1.class2 { font-size: 2em }
...
<ul class="class1">Text1</ul>
<ul class="class1 class2">Text2</ul> <!-- селектор применится здесь-->
<ul class="class2">Text3</ul>
10. Селектор мультиатрибутов ([attr1][attr2="value"][attr3|="value2"])
Каждый тег может иметь несколько атрибутов, для которых применяются различные формы селектора атрибутов.
Комбинированные селекторы (типа
XY). Допускается комбинировать следующие селекторы:
11. Типа и (мульти)класса элемента (2 и 3, 2 и9):
ul.box {} - все элементы типа ul и класса .box
li.calss1.class2 {} - применяется ко всем элементам типа li и классов class1 и class2.
При этом комбинация *.class эквивалентна обычному селектору класса .class .
12. Типа и (мульти)атрибутов (2 и 5, 2 и 10):
p[title] - все элементы типа p, имеющие атрибут типа title.
13. Типа и псевдоклассов (2 и 6):
a:visited {} - применяется ко всем элементам типа a и состоянием visited.
14. Типа и псевдоэлементов (2 и 7):
p::before {} - вставка заданного контента перед всеми элементами типа p.
Селекторы иерархии. Теги в дереве могут находиться в следующих отношениях:
а) предок-потомок - тег потомок находится внутри тега предка на произвольном уровне вложенности;
б) родитель-ребёнок - тег ребёнок является непосредственным потомком тега предка;
в) сиблинги (братья, сёсты) - теги, расположенные на одном уровне иерархии.
<body>
<p>Hello, <b>cruel <i>world</i></b></p>
<br />
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
p, b, i, br, ul, все li являются потомками body, однако только p, br, ul являются его детьми.
p, br, ul являются сиблингами, также как и все li
15. Селектор потомков (
X Y (разделитель пробел))
Правило применяется ко всем тегам с селектором Y, предком которых является селектор X. Возможно несколько уровне вложенности (X Y Z T), в качестве селекторов могут применяться в т.ч. и комбинированные селекторы, а также универсальный селектор:
ul.class1 * {} - применяется ко всем потомкам типа ul со классом class1.
body * p {} - применяется ко всем потомкам типа p, содержащихся в теге body но обязательно отделённых от body каким-либо другим тегом:
<body>
<article>
<p>One</p> <!-- стиль применяется -->
<p>Two</p> <!-- и здесь -->
</article>
<p>Three</p> <!-- а здесь нет - p - дочерний элемент относительно body -->
</body>
16. Селектор прямых потомков (
X > Y)
Выбирает только прямого потомка (ребенка) Y селектора X. Также возможно наличие нескольких уровней вложенности и использование универсального селектора.
17. Строгий селектор сиблингов (
X + Y)
Выбирает сиблингов определяемых селектором Y, строго следующих за элементами, опредляемыми селектором X.
div + p {} - правило применяется к тегу p, следующему за тегом div (точнее, </div> - речь идёт о сиблингах, которые находятся на одном уровне иерархии).
18. Нестрогий селектор сиблингов (
X ~ Y)
Выбирает всех сиблингов, определяемых селектором Y и следующих за элементами, определяемыми селектором X.
ul ~ li {} - правило применяется ко всем тегам li (расположенным на одном уровне иерархии), следующим за тегом ul .
