Без селекторов задавать стили для элементов html-страницы очень сложно. Необходимо было бы прописывать стили с помощью атрибута style у каждого элемента, это нерационально и долго. Существование селекторов и файла CSS существенно упрощает задачу. В этом css-уроке разберемся с тем, какие же существуют селекторы.
Селекторы по тегу, классу и id
Этот тип селекторов указывает на все элементы страницы с определенным тегом. Чтобы прописать стили по тегу, необходимо взять название тега и в фигурных свойствах отметить все свойства для них. Что касается селектора по классу, то необходимо указать сначала название класс, а потом в фигурных скобках css-свойства для него. Для селектора по id ситуация идентичная.
Например, пропишем свойства для всех абзацей на странице и для последнего из абзацей по классу перебьем значение отступа снизу:
<div class="content">
<p>...</p>
...
<p class="last">...</p>
</div>p {
margin-bottom: 10px;
color: #000;
font-size: 14px;
}
.last {
margin-bottom: 25px;
}
Вложенные и соседние селекторы
Далее поговорим о вариациях, как можно проще задавать стили для различных элементов, не прибегая к использованию классов. Часто мы должны задать стили только для вложенных элементов. Допустим определенные стили ТОЛЬКО у ссылок меню или ТОЛЬКО у абзацей определенного блока, например, блока с контентом. Для этого используется понятие вложенных селекторов. Необходимо слева направо задать порядок вложенности.
Например, добавим стили для абзацей контентной части. В этом случае стили, которые заданы у вложенного в блок абзаца перебьют общие стили для всех абзацей. Таким образом мы не плодим лишние классы, а обходимся компактной конструкцией.
<div class="content">
<p>...</p>
...
<p>...</p>
</div>p {
margin-bottom: 10px;
color: #000;
font-size: 14px;
}
.content p {
color: #eee;
font-size: 16px;
matgin-bottom: 15px;
}Еще одна полезная фишка для удобства - это использование соседних селекторов. Слева направо через знак плюс прописываем два селектора. Стили, указанные в фигурных скобках, применяются к последнему селектору только в случае, если он стоит после первого.
Например, для селектора по классу .sec применется отступ сверху, если он стоит после элемента с классом .first:
<div class="content">
<p class="first">...</p>
<p class="sec">...</p>
</div>.first + .sec {
margin-top: 20px;
}
Вложенные и соседние селекторы можно комбинировать. Если зададим в примере перед конструкцией .first + .sec класс .content, то свойства применяются для второго класса в случае, если он идет после первого и они оба лежат в блоке с классом .content.
Стили для дочерних селекторов. Чем дочерние элементы отличаются от потомков
С вложенностью селекторов мы познакомилимь. Понятно, что сначала идет родительский элемент (предок), а вложенные в него элементы являются потомками. При чем не важно, какой у них уровень вложенности, все равно для первого элемента они будут потомками. Чтобы задать стили для первого уровня вложенности, т.е. для непосредственного потомка, используют понятие дочернего селектора. Для этого используют символ >, он указывает на дочерний селектор.
В данном примере стили применяются только для элемента span вложенного непосредственно в .content, а для span внутри абзаца не применяются.
<div class="content">
<span>...</span>
<p class="first">
<span>...<span>
</p>
<p class="sec">...</p>
</div>
.content > span {
...
}Псевдоклассы
Еще одно уточнение для задания стилей. Расширяет наши возможности и сужает область применения без использования дополнительных классов и конструкций. Псевдоклассы задаются через символ двоеточия. Перечислим часто используемые и кратко познакомимся с ними:
- first-child и last-child. Задает стили для первого и последнего дочернего элемента внутри родителя. Например, стили только для первого абзаца внутри контентной области.
p:first-child{...} - nth-of-type. Идея схожа с предыдущем псевдоклассом. Указывает на элеменет в зависимости его расположения внутри родителя. Только здесь еще точнее, может отметить не только первый и последний элементо, но и с любым порядковым номер. Синтаксис такой селектор:nth-child(значение). Значение может быть целочисленное или заданное с помощью формулы. Например, для всех четных абзацей можно использовать такую запись:
p:nth-of-type(2n){...} - hover. С помощью этого псевдокласса можно отследить такое действие пользователя, как наведение на элемент и задать при этом стилистические особенности. Например, при наведении на ссылку уберем ее подчеркивание.
a:hover {text-decoration: none;} - :link, :visited и :active. Специальные псевдоклассы для работы со ссылками. С помощью них можно добавить стили непосещенных, посещенных и активных ссылок.
- :focus. Псевдокласс для элементов в фокусе, например для input куда мы на данный момент вводим значение.
