div {color : red} – тег

div.green {color : green} - тег + класс

.blue {color : blue} - класс

<div>Обычный div</div>

<div class=”green”>Div с классном green</div>

<p class=”green”>Абзац с классом green

<p class=”blue”>Абзац с классом blue

<div class=”blue”>Div с классом blue</div>

Другие селекторы

#back {color : red} – id

div#back {color : black} – тег + id

div b {color : green} – контекстные

td td td {color : blue} – селекторы

<div id=”back”>Div с id = back</div>

<div>Div с <b>контекстным</b> селектором</div>

<table><tr><td><table><tr><td><table><tr><td>

Третий уровень вложённости

</td></tr></table></td></tr></table></td></tr>

</table>

И ещё о селекторах

Соседние селекторы

b + i {color : red}

Дочерние селекторы

div > p {color : red}

Селектор атрибута

p[align] {color : red}

p[align=”right”] {color : green}

p[align~=”right”] {color : green}

div[lang|=”en”] {color : red}

Универсальный селектор

*{color : black}

 Группировка селекторов

h1{

color : red ;

background : yellow

}

h2{

color : blue ;

background : yellow

}

h3{

color : green ;

background : yellow

}

Эта запись эквивалентна вот этой:

h1,h2,h3{

background : yellow

}

h1 {

color : red;

}

h2 {

color : blue;

}

h3 {

color : green:

}