| Селектор |
Описание, пример |
| Универсальный |
Универсальный селектор соответствует любому элементу, например, следующая запись обнулит отступы для всех элементов веб-сайта:
* {margin: 0;} |
| Элемента |
Селекторы элементов используются для определения стилей элементов для всех страниц веб-сайта, например, стиль заголовков h1 или общий стиль абзацев:
h1 {font-family: Lobster, cursive;}
p {letter-spacing: 0.1em;} |
| Класса |
Селекторы класса используются для определения стилей для нескольких элементов одного типа, размещенных в разных частях или на разных страницах веб-сайта.
Для создания заголовка класса headline необходимо добавить атрибут class с соответствующим значением в открывающий тег <h1>.
Далее необходимо задать стиль для указанного класса. Данный стиль оформления можно применить и для других элементов.
Код HTML:
<h1 class="headline">Инструкция пользования персональным компьютером</h1>
Код CSS:
.headline {
text-transform: uppercase;
color: lightblue;}
|
| Идентификатора |
Селекторы идентификатора используются для присваивания стиля [b]одному[/b] конкретному элементу. Идентификатор id элемента можно использовать в документе только один раз, так как он выделяет уникальный элемент.
#sidebar {
text-transform: uppercase;
color: lightblue;} |
| Потомка |
К потомкам элемента относятся его дочерние элементы. Селекторы потомков позволяют стилизовать все вложенные элементы, например, можно отформатировать внешний вид элементов маркированного списка:
ul li {text-transform: uppercase;} – выберет все элементы li, являющиеся потомками всех элементов ul.
Если нужно отформатировать потомки определенного элемента, то можно задать ему стилевой класс:
p.first a {color: green;} – означает, что нужно применить данный стиль ко всем ссылкам, потомкам абзаца, относящегося к классу с именем first;
p .first a {color: green;} -если добавить пробел, то будут выбраны ссылки, расположенные внутри любого тега класса .first, который является потомком элемента <p>;
.first a {color: green;} – данный стиль применяется к любой ссылке, расположенной внутри других тегов, обозначенных классом .first. |
| Дочерний |
Дочерний тег является прямым потомком содержащего его тега, т.е. отношения "родители-дети” существуют между элементами и теми элементами, которые содержатся непосредственно внутри них. У одного элемента может быть несколько дочерних элементов, а родительский элемент может быть у каждого элемента только один.
p > strong – выбирает все элементы strong, являющиеся дочерними по отношению к элементу p. |
| Сестринский |
Сестринские отношения возникают между элементами, имеющими общего родителя. Селекторы сестринских элементов позволяют выбрать теги из группы элементов одного уровня.
h1 + p – выберет все первые абзацы, идущие непосредственно за любым тегом <h1>, не затрагивая остальные абзацы.
h1 ~ p – выберет все абзацы, являющиеся сестринскими по отношению к любому заголовку h1 и идущие после него. |
| Атрибута |
Селекторы атрибутов позволяют форматировать элементы на основе выборки любых содержащихся в них атрибутов или значений атрибутов, варианты:
[атрибут] – выбирает все элементы, для которых задан указанный атрибут.
img[alt] – выбирает все картинки, содержащие атрибут alt.
img[title="flower"] – выбирает все картинки, название которых содержит слово flower.
a[href^="http://"] – выбирает все ссылки, начинающиеся на http://.
img[src$=".png"] – выбирает все картинки, название которых заканчивается на .png.
a[href*="ru"] – выбирает все ссылки, название которых содержит слово ru.
input[type="text"] – выбирает только текстовые поля формы.
article[class~="feature"] – выбирает статьи по частичному значению атрибута, т.е. статьи, название класса которых содержит данное слово.
article[id|="feature"] – выбирает элемент, атрибут которого эквивалентен feature или начинается на feature. |
| Псевдокласс |
Псевдоклассы – это классы, фактически не прикрепленные к тегам html-кода. Они вызывают CSS-правила при совершении того или иного события или подчиняющиеся тому или иному правилу:
a:link – ссылается на не посещенную ссылку.
a:visited – ссылается на уже посещенную ссылку.
a:hover – ссылается на любой элемент, по которому проводят курсором мыши.
a:focus – ссылается на любой элемент, над которым находится курсор мыши.
a:active – ссылается на элемент, который был активизирован пользователем.
:valid – выберет поля формы, содержимое которых прошло проверку в браузере на соответствие указанному типу.
:invalid – выберет поля формы, содержимое которых не соответствует указанному типу.
:enabled – выберет все доступные (активные) поля форм.
:disabled – выберет заблокированные поля форм, т.е., находящиеся в неактивном состоянии.
:in-range – выберет поля формы, значения которых находятся в заданном диапазоне.
:out-of-range – выберет поля формы, значения которых не входят в установленный диапазон.
:lang() – выбирает абзацы на указанном языке.
:not(селектор) – выберет элементы, которые не содержат указанный селектор, например, класс, идентификатор или селектор элемента :not([type="submit"]).
:target – выбирает элемент с символом #, на который ссылаются в документе.
:checked – выбирает выделенные (выбранные пользователем) элементы. |
| Структурные псевдоклассы |
Структурные псевдоклассы форматируют дочерние элементы в соответствии с указанным параметром в скобке, варианты:
:nth-child(odd) – выбирает нечетные дочерние элементы.
:nth-child(even) – выбирает четные дочерние элементы.
:nth-child(3n) – выбирает каждый третий элемент среди дочерних.
:nth-child(3n+2) – выбирает каждый третий элемент, начиная со второго дочернего элемента (+2).
:nth-child(n+2) – выбирает все элементы, начиная со второго.
:nth-child(3) – выбирает третий дочерний элемент.
:nth-last-child() – в списке дочерних элементов выбирает элемент с указанным местоположением, аналогично с :nth-child(), но начиная с последнего, в обратную сторону.
:first-child – позволяет оформить только самый первый дочерний элемент тега.
:last-child – позволяет форматировать последний дочерний элемент тега.
:only-child – выбирает элемент, являющийся единственным дочерним элементом.
:empty – выбирает элементы, у которых нет дочерних элементов.
:root – выбирает элемент, являющийся корневым в документе (элемент html). |
| Структурные псевдоклассы типа |
Позволяют указать на конкретный тип дочернего тега:
:nth-of-type() – выбирает элементы по аналогии с :nth-child(), при этом берет во внимание только тип элемента.
:first-of-type – позволяет выбрать первый дочерний элемент.
:last-of-type – выбирает последний тег конкретного типа.
:nth-last-of-type() – выбирает элемент заданного типа в списке элементов в соответствии с указанным местоположением, начиная с конца.
:only-of-type – выбирает единственный элемент указанного типа среди дочерних элементов родительского элемента. |
| Псевдоэлементы |
Псевдоэлементы используются для добавления содержимого, которое генерируется с помощью свойства content, и для изменения внешнего вида части элемента:
:first-letter – выбирает первую букву каждого абзаца, применяется только к блочным элементам.
:first-line – выбирает первую строку текста элемента, применяется только к блочным элементам.
:before – вставляет генерируемое содержимое перед элементом.
:after – добавляет генерируемое содержимое после элемента. |
|
Ajax.ru