1. * { } — все тэги, любой элемент (универсальный селектор).

2. тэг { } — одиночный тэг (селектор типа).

2. тэг1, тэг2, тэг3 { } — тэги через запятую.

4. тэг1>тэг2i { } — дочерний селектор тэг2 в пределах родительского тэг1. (дочерние селекторы)

5. тэг1.класс1 { } — класс1-имя класса. Стиль применяется тому дескриптору (тэгу тег2), чей атрибут class соответствует этому имени(класс1).

Пример: h2.mybule { } — стиль применяется ко всем дескрипторам h2, у которых атрибут class равен «mybule»

6. #id1 { } — для любого дескриптора для которого id=id1.

селекторы аттрибутов:

7. E[foo] { } — для элемента E с аттрибутом «foo». Элементы для которых установлен атрибут foo, независимо от значения этого атрибута.

Пример: p[title] { color:#f00; }
Следующее правило применяется ко всем элементам p для которых определен атрибут title.

H1[title] {color: blue}  /* Применяется ко всем элементам H1, имеющим атрибут title */

8. E[foo="bar"] { } — для элемента E у которого аттрибут «foo» равен значению «bar». Элементы, значение атрибута att которых в точности равно bar.

SPAN[class="example"] {color: blue;}    /* Применяется ко всем элементам SPAN, имеющим атрибут class=»example» */

div[class=error] { } /*Селектор сопоставляющий правило всем элементам div которые имеют атрибут class со значением error.*/

*[lang="fr"] {display: none;}  /* Применяется ко всем элементам, имеющим атрибут lang=»fr» */

9. E[foo~="bar"] { } — для элемента E у которого аттрибут «foo» представлен списком через запятую и один из элементов списка равен «bar». Элементы атрибут att которых содержит список значений разделенных пробелами, одно из которых равно bar. В этом случае bar не может содержать пробелов. Применяется ко всем элементам, чей атрибут foo имеет состоит из списка значений, разделенных пробелами, и одно из этих значений равно bar.

SPAN[class~="example"] {color: blue;}    /* Эквивалентно селектору SPAN.example */

10. E[foo^="bar"] { } — для элемента E у которого аттрибут «foo» начинается ровно со строки «bar».

11. E[foo$="bar"] { } — для элемента E у которого аттрибут «foo» заканчивается ровно строкой «bar».

12. E[foo*="bar"] { } — для элемента E у которого аттрибут «foo» содержит подстроку «bar».

13. E[hreflang|="en"] { } —  для элемента E у которого аттрибут «hreflang» представляет собой список значений разделенных дефисами и начинается список с «en».

[att|=val] – Если значением атрибута att элемента является список разделенных дефисом слов, начинающийся со слова «val». Сопоставление всегда начинается с начала значения атрибута. В первую очередь это необходимо для сопоставления отдельным участкам кода языка (например, атрибут lang в HTML или xml:lang в XHTML), как описано в стандарте RFC1766. 

[attr|=value] - Применяется ко всем элементам, чей атрибут attr имеет значение, состоящее из нескольких «слов», разделенных дефисом, причем первое из этих слов равно value (первоначально предназначалось для выделения кода основного языка из полного кода языка). 

*[lang|="en"] {color: red;}   /* Применяется ко всем элементам, у которых атрибут lang начинается с «en» (например, «en-us» или «en-gb») */

14. E:root { } —  для элемента E – корневого для документа.

15. E:nth-child(n) { } — для элемента E, n-го ребенка от своего родителя.

16. E:nth-last-child(n) { } — для элемента E, n-го ребенка от своего родителя, считая от последнего.

17.  E:nth-of-type(n) { } — для элемента E, n-й сестрой этого типа.

18. E:nth-last-of-type(n) { } —  для элемента E, n-й сестрой этого типа, начиная отсчет с последнего.

19. E:first-child { } —   для элемента E, 1-го ребенка от своего родителя. первый дочерний элемент другого элемента.

20. E:last-child { } — для элемента E, последнего ребенка от своего родителя.

21. E:first-of-type { } —  для элемента E, первой сестрой своего типа.

22. E:last-of-type { } — для элемента E, последней сестрой своего типа.

23. E:only-child { } — для элемента E, только ребенка от этого родителя (единственного).

24. E:only-of-type { } — для элемента E, только сестрой своего типа.

25. E:empty { } —  для элемента E, не имеющего детей (включая текстовые узлы).

26. E:link { } — не посещенные.

CSS обеспечивает возможность задания стилей их отображения через псевдоклассы :link (не посещенная гиперссылка) и :visited (посещенная гиперссылка). Какой именно элемент задает анкеры гиперссылок, определяется языком документа. В языке HTML анкеры задаются элементу <а>, поэтому следующие декларации эквивалентны:

а:link { color: red }
:link { color: red }

Если следующая гиперссылка
<а class=»external» href=»#»>Внешняя ссылка</а>
будет посещена пользователем, то правило
а.external:visited { color: blue }
вызовет ее отображением голубым цветом.

27. E:visited { } — посещенные.

28. E:active { } — для активной ссылки. Ссылка становится активной при нажатии.

29. E:hover { } — при наведении на ссылку мыши.

30. E:focus { } — элемент, имеющий фокус ввода.

32. E:target { } — для элемента E, являющегося целью URI.

33. E:lang(fr) { } — для элемента E языка (fr), (язык документа определяет, какой язык определен).

:lang – этот псевдокласс определяет текущий язык.

Псевдокласс :lang(код языка) указывает на язык элемента. В языке HTML язык элемента задается атрибутом lang или соответствующим метаописателем; в языке XML — атрибутом XML:LANG. Например, следующие правила задают кавычки для элементов, написанных на английском и русском языках соответственно:
HTML:lang(en) { quotes: ‘« ‘ ‘ »’ }
HTML:lang(ru) { quotes: ‘»’ ‘«’ ‘\2039′ ‘\203A’ }

34. E:enabled { } — пользовательские элемент интерфейса E, который включен.

35. E:disabled { } — пользовательские элемент интерфейса E, который выключен.

36. E:checked { } —  пользовательский элемент интерфейса E, который проверяемый (например радио-кнопка или галочка).

37. E::first-line { } — первая строка элемента Е, первая формированая строка абзаца.

Псевдоэлемент :first-line применим к любому блочному элементу и задает стиль отображения его первой строки.

P:first-line { text-transform: uppercase }

<p>Это длинный абзац, который будет разбит обозревателем на несколько строк. При этом первая строка абзаца будет отображаться прописными буквами, как это задано в таблице стилей.</p>

К данному псевдоэлементу применимы только следующие свойства: свойства шрифтов, свойства цвета, свойства фона, word-spacing, letter-spacing, text-decoration, vertical-align, text-transform, line-height, text-shadow и clear

38. E::first-letter { } — первая буква в элементе Е, первая буква абзаца.

:first-letter применим к любому блочному элементу и задает стиль отображения его первой буквы.
P:first-letter { font-size: 200%; font-weight: bold }

<p>Это абзац, первая буква которого будет выделена обозревателем.</p>

К данному псевдоэлементу применимы только следующие свойства: свойства шрифтов, свойства цвета, свойства фона, свойства границ, свойства заполнителей, свойства рамок, text-decoration, vertical-align (только если float  равно none), text-transform, line-height, float, text-shadow и clear.

39. E::selection { } — часть элемента E, который в настоящее время выбирается/выдвигается на первый план пользователем.

40. E::before { } — генерация контента до элемента Е. (т.е. перед). определяет содержимое перед элементом.

41. E::after { } —  генерация контента после элемента Е. определяет содержимое после элемента.

42. E.warning { } — элемент E, класс которого «warning» (язык документа (видимо разметка) определяет, как\какой класс определен).

P.bluetext { color: blue }
Эта строка обозначает, что мы определили для текста, находящегося внутри тега <p> и помеченного стилевым классом bluetext, синий цвет шрифта.

<p class=»bluetext»> Это синий текст</p>

h3.abstract { }
В этом случае селектор будет действовать только на заголовки третьего уровня (h3), имеющие атрибут class со значением abstract, и не будет действовать, например, на абзацы текста (р) или элементы перечня (li), даже если в их открывающем тэге написано class=»abstract».

blockquote[class=quote][cite] { }
Можно использовать и множественные селекторы атрибутов, это дает возможность отбора элементов по нескольким атрибутам. Представлен пример правила применяемого к элементам blockquote которые имеют атрибут класс в точности равный “quote” и атрибут cite (независимо от значения этого атрибута).

CSS поддерживает селекторы классов, которые основаны на использовании атрибута class и имеют вид element.class. Пусть, например, наша таблица стилей содержит правило
P.warning {font-style: italic;}

<p class=»warning»>Рекомендуется выбирать названия классов, отражающие их назначение.</p>
будет отображаться курсивным шрифтом.

P.warning.red  {font-style: italic;}

будет применимо к элементам с атрибутом class=»warning red blue», но не применимо к элементам с атрибутом class=»warning blue».

43. E#myid { } — элемент Е,  с ID равным «myid».

element#id или просто #id. Селектор идентификатора, не содержащий имени элемента, следует понимать как селектор *#id, в котором универсальный селектор * опущен.

#p001 {letter-spacing: 0.3em;}

<p id=»p001″>Разреженный текст</p>
правило стиля будет применено к элементу <p> с атрибутом id=»p001″

h1#p001 {letter-spacing: 0.3em;}

<p id=»p001″>Широкий текст</p>
правило стиля применимо только к элементу h1 с атрибутом id=»p001″ и поэтому не будет применено к элементу P с этим атрибутом.

44. E:not(s) { } — элемент Е, который не совпадает с простой селектор.

45. E F { } — для элемента F, являющегося потомком элемента E. Селектор потомков (контекстный селектор).

Селекторы тех элементов, которые являются потомками другого элемента в дереве документа. Рассмотрим такую задачу: определить стиль отображения всех элементов EM, которые находятся внутри элементов H1:
H1 { color: red }
EM { color: red }
H1 EM { color: blue }
Таким образом, для задания селектора потомка достаточно образовать селектор из селектора, задающего предка, и селектора, задающего потомка, разделив их пробелом. Вы можете дать специальное форматирование тегу только в том случае, если он заключен внутрь другого тега:

H7 B { color: blue }
<H7> <B> Этот</B> текст будет синим</H7>
<P> А <B> этот</B> – не будет!</P> потому что в тэге P.

Контекстный селектор…
Этот селектор применяется, когда оформление элемента должно зависеть не только от самого этого элемента, но и от того, в какой элемент он вложен. (Например, мы хотим раскрасить в определенный цвет каждый отдельный пункт маркированного списка, но при этом оставить нераскрашенными нумерованные списки.)
Такой селектор будет действовать на все элементы li при условии, что эти элементы вложены в элемент ul. На элементы li, вложенные в ol, он не действует.
Контекстный селектор состоит из двух или нескольких селекторов одного из предыдущих типов, описанных ранее. Эти селекторы отделяются друг от друга пробелами. При создании веб-страницы часто приходится вкладывать одни теги внутрь других. Чтобы стили для этих тегов использовались корректно, помогут селекторы, которые работают только в определенном контексте. Например, задать стиль для тега <B> только когда он располагается внутри контейнера <P>. Таким образом можно одновременно установить стиль для отдельного тега, а также для тега, который находится внутри другого. Контекстный селектор состоит из простых селекторов разделенных пробелом. Так, для селектора тега синтаксис будет следующий:

Тег1 Тег2 { … }

В этом случае стиль будет применяться к Тегу2 когда он размещается внутри Тега1, как показано ниже.

<Тег1>
<Тег2> … </Тег2>
</Тег1>

46. E > F { } —  для элемента F, являющегося ребенком элемента E. Селектор детей (дочерние селекторы).

div > strong { }
Селектор дочернего элемента указывает на элемент, который является непосредственным потомком другого элемента, данный селектор состоит из двух или более селекторов элементов разделенных знаком «>», родительский элемент располагается слева от этого знака. Правило действительно для всех элементов strong являющихся непосредственными потомками div.

BODY > P { text-indent: 3em }
использование селекторов детей, т. е. селекторов тех элементов, которые являются детьми другого элемента в дереве документа. Селекторы детей образуются путем соединения нескольких селекторов символом «>». Следующее правило будет применяться ко всем элементам P, которые являются детьми элемента BODY  (иными словами, оно применимо к тем и только тем элементам P, которые находятся внутри элемента BODY, и никакого промежуточного элемента между BODY  и P нет.

DIV OL>LI P { line-height: 1.5 }
В следующем примере сочетаются селекторы потомков и селекторы детей. Субъектом этого правила будет элемент P, который является потомком элемента LI, которыйв свою очередь является ребенком элемента OL, который в свою очередь является потомком элемента DIV. Обратите внимание, что необязательные пробелы вокруг символа «>» в этом примере опущены.

P > EM { color: red }

<div class=»main»>
<p><em>Lorem</em>, consectetuer </p>
<p><strong><em>Ut wisis</em></strong>, quis</p>
</div>

Здесь дочерним элементом по отношению к тегу <DIV> выступает параграф <P>. Вместе с тем тег <STRONG> не является дочерним для тега <DIV>, поскольку он расположен в контейнере <P>. Стиль вида P > EM { color: red } будет установлен для первого абзаца документа для тега EM, поскольку тег <EM> находится внутри контейнера  <P>, и не даст никакого результата для второго абзаца. А все из-за того, что тег <EM> во втором абзаце расположен в контейнере <STRONG>, поэтому нарушается условие вложенности. По своей логике дочерние селекторы похожи на селекторы контекстные. Разница между ними следующая – стиль к дочернему селектору применяется только в том случае, когда он является прямым потомком, иными словами, непосредственно располагается внутри родительского элемента. Для контекстного селектора допустим любой уровень вложенности.

Дочерним селектором считается такой, который в дереве элементов находится прямо внутри родительского элемента. Синтаксис применения таких селекторов следующий: Селектор 1 > Селектор 2 { } – Стиль применяется к Селектору 2, но только в том случае, если он является дочерним для Селектора 1.

47. E + F { } —  для элемента F, немедленно предшествующего элементу E. Селектор соседей.

Пример: p + p { }
Селектор соседних элементов состоит из двух простых селекторов и символа «+» между ними. Данный селектор указывает на элемент, следующий за первым. Элементы должны имеет один и тот же родительский элемент и первый элемент должен располагаться непосредственно перед вторым. Соседними называются элементы веб-страницы, когда они следуют непосредственно друг за другом в коде документа. Рассмотрим несколько примеров отношения элементов.

<p>Lorem ipsum <b>dolor</b> sit amet.</p>

Тег <B> является дочерним по отношению к тегу <P>, поскольку он находится внутри этого контейнера. Соответственно <P> выступает в качестве родителя <B>.

<p>Lorem ipsum <b>dolor</b> <var>sit</var> amet.</p>

Теги <VAR> и <B> никак не перекрываются и представляют собой соседние элементы. То, что они расположены внутри контейнера <P>, никак не влияет на их отношение.

<p>Lorem <b>ipsum </b> dolor sit amet, <i>consectetuer</i> adipiscing <tt>elit</tt>.</p>

Соседними здесь являются теги <B> и <I>, а также <I> и <TT>. При этом <B> и <TT> к соседним элементам не относятся из-за того, что между ними расположен контейнер <I>.

Для управления стилем соседних элементов используется символ плюса (+), который устанавливается между двумя селекторами. Общий синтаксис следующий.

Селектор 1 + Селектор 2 { Описание правил стиля }

Пробелы вокруг плюса не обязательны, стиль при такой записи применяется к Селектору 2, но только в том случае, если он является соседним для Селектора 1 и следует сразу после него.

H1 + H2 { margin-top: -5mm }
использование селекторов соседей, т. е. селекторов тех элементов, которые являются братьями в дереве документа и расположены в документе непосредственно друг за другом. Селекторы соседей образуются путем соединения нескольких селекторов символом «+». Следующее правило уменьшает расстояние между элементами H1 и H2, если H2 непосредственно следует в документе за H1.

H1.opener + H2 { margin-top: -5mm }
Приведем аналогичный пример, но в нем элемент H1 должен иметь атрибут class=»opener»

48. E ~ F { } —  для элемента F, предшествующему элементу Е.

49. E*F { } —Универсальный селектор. Правило применяется ко всем F внутри любых элементов, которые заключены в элемент E.

DIV * EM { color: blue }
Данное правило будет применяться ко всем элементам EM, которые находятся внутри любых элементов (универсальный селектор), которые заключены в элемент DIV.

50. Псевдо-классы.

В связи с релизом Интернет Эксплорера 7 хотелось упомянуть css псевдоэлементы, благо часть из них теперь поддерживается этим браузером тоже.

:first-line и :first-letter - Два этих псевдоэлемента дают хорошую возможность выделить начало абзаца или первую букву слова.

Пример:

p:first-letter {

font-size: 3em;

float: left;

}

p:first-line {

font-weight: bold;

}

Поддерживающие браузеры: Интернет Эксплорер 7, Файрфокс, Опера 9

 

:before и :after - Эти псевдоэлементы открывают еще больший простор для форматирования, но в следствии того что они работают в связке со свойством content, не поддерживаются Интернет эксплорером. :before и :after позволяют вставить контент перед и после любого HTML-элемента соответственно. Допустимые значения свойства content в псевдоэлементах before и after:

-inhert

-[URI]

-[string]

-normal

-open-quote

-close-quote

-no-open-quote

-no-close-quote

-attr([attribute name])

-counter([name], [style])

-counters ([name], [string], [style])

 

Пример:

p:before{ content: url(images/arrow.gif); }

p:after { content: close-quote; }

li:before { content: «>>»; }

Поддерживающие браузеры: Файрфокс, Опера.

51. Другие примеры:

1. DIV > P:first-child { text-indent: 3em }
Псевдокласс :first-child соответствует элементу, который является первым ребенком данного элемента. В следующем примере субъектами селектора будут те элементы P, которые являются первым ребенком элемента DIV. В результате первый элемент P внутри DIV в следующем фрагменте будет выводиться с отступом в начале текста:
<P>Последний абзац перед примечанием.</P>
<DIV class=»note»><P>Первый абзац внутри примечания.</P></DIV>
а такой же элемент P в этом фрагменте отображается без отступа, т. к. не является первым ребенком DIV:
<P>Последний абзац перед примечанием.</P>
<DIV class=»note»><H2>Примечание.</H2><P>Первый абзац внутри примечания.</P></DIV>

2. P:first-child EM { font-weight: bold }
Следующее правило указывает, что элемент EM, содержащийся в элементе P, который является первым ребенком, должен отображаться полужирным шрифтом.