CSS - Селекторы

На этом уроке мы изучим основные виды селекторов, и научимся их использовать на практике.

Что такое селекторы CSS?

Селекторы – это правила, на основании которых осуществляется выбор элементов в HTML документе для того чтобы к ним применить определённые стили с помощью свойств CSS.

CSS - селектор

Например:

p {
text-align: center;
font-size: 20px;
}

где: p – это селектор, text-align и font-size – это свойства, а center и 20px – значения.

Основные виды:

  • селектор элемента (например: div);
  • селектор класса (например: .center);
  • селектор идентификатора (например: #footer);
  • селектор * (выбор всех элементов);
  • селекторы атрибутов (например: [href*="youtube"]);
  • селекторы псевдоклассов (например: p:first-of-type).

Селектор: элемент

Выбор всех элементов в HTML документе, имеющих указанный тег.
Например, установить для всех элементов <p> внутренние отступы, равные 5px.
HTML:
<p>...</p>

CSS:
p {padding: 5px;}

Селектор: класс

Выбор всех элементов в HTML документе, имеющих указанный класс.
Например, установить для всех элементов, имеющих class="center" выравнивание текста по центру.
HTML:
<p class="center">...</p>

CSS:
.center {text-align: center;}

Селектор: идентификатор

Выбор элемента в HTML документе, имеющего указанный идентификатор.
Например, установить для элемента, имеющего идентификатор id="footer" высоту 50px и внешний отступ сверху 20px.
HTML:
<div id="footer">...</div>

CSS:
#footer {height: 50px; margin-top: 20px;}

Селектор: *

Выбор всех элементов в HTML документе.
Например, установить для всех элементов внешние и внутренние отступы равные 0.
CSS:
* { margin: 0; padding: 0; }

Селекторы атрибутов предназначены для выбора элементов в зависимости от указанного атрибута элемента или его значения. Различают следующие виды атрибутов: [атрибут], [атрибут=значение], [атрибут^=value], [атрибут|=value], [атрибут$=value], [атрибут*=value], [атрибут~=value].


Селектор: [атрибут]

Выбор всех элементов в HTML документе, имеющих указанный атрибут.
Например, установить красный цвет фона для всех элементов, имеющих атрибут target.
HTML:
<a href="#" target="_blank">Ссылка</a>

CSS: 
[target] {
  background-color: red;
}

Селектор: [атрибут=значение]

Выбор всех элементов, имеющих атрибут="значение".
Например, установить зелёный фон для всех элементов с rel="nofollow".
HTML:
<a href="#" rel="nofollow">Ссылка</a>

CSS:
[rel="nofollow"] {
  background-color: green;
}

Селектор: [атрибут^=value]

Выбор всех элементов, имеющих атрибут, значение которого начинается с value.
Например, установить желтый цвет фона для всех элементов, имеющих атрибут class, значение которого начинается с color.
HTML:
<a class="color" href="#">Ссылка</a>
<a class="color_test" href="#">Ссылка</a>

CSS:
[class^="color"] {
  background-color: yellow;
}

Селектор: [атрибут|=value]

Выбор всех элементов, имеющих атрибут, значение которого равно value или начинается с value следующим образом value-* (value с обязательным дефисом, после которого идёт остальное содержимое значения).
Например, установить оранжевый цвет фона для всех элементов, имеющих атрибут class, значение которого равно test или test-*.
HTML:
<p class="test ">...</p>
<p class="test-wizard">...</p>

CSS:
[class|="test"] {
  background-color: orange;
}

Селектор: [атрибут$=value]

Выбор всех элементов, имеющих атрибут, значение которого заканчивается на value.
Например, установить желтый цвет фона для всех элементов, имеющих атрибут class, значение которого заканчивается на color.
HTML:
<a class="color" href="#">Ссылка</a>
<a class="test_color" href="#">Ссылка</a>

CSS:
[class$="color"] {
  background-color: yellow;
}

Селектор: [атрибут*=value]

Выбор всех элементов, имеющих атрибут, значение которого содержит подстроку value.
Например, установить зелёный цвет фона для всех элементов, у которых атрибут href содержит подстроку "youtube".
HTML:
<a href="https://www.youtube.com/watch?v=SE-MKaTcXUI">Ссылка</a>

CSS:
[href*="youtube"] {
  background-color: green;
}

Селектор: [атрибут~=value]

Выбор всех элементов, имеющих атрибут, значение которого содержит value как одно из значений через пробел.
Например, установить коричневый цвет фона для всех элементов, у которых атрибут class содержит text как одно из значений через пробел.
HTML:
<p class="text">...</p>
<p class="hot-news text football">...</p>

CSS:
[class~="text"] {
  background-color: brown;
} 

Псевдоклассы используются для определения особого состояния элемента. В отличие от настоящих классов, они явно не указываются в HTML. В CSS имя псевдокласса начинается с знака двоеточия(:). Различают следующие виды псевдоклассов: :link, :visited, :active, :hover, :focus, :lang(язык), :first-child, :first-of-type, :last-child, :last-of-type, :only-child, :only-of-type, :nth-child(n), :nth-last-child(n), :nth-of-type(n), :nth-last-of-type(n), :root, :empty, :target, :enabled, :disabled, :checked, :not(selector).


Селектор :link

Выбор всех не посещённых ссылок.
Например, установить зелёный цвет для всех не посещённых ссылок.
HTML:
<a href="#">Ссылка</a>

CSS:
a:link {
  color: green;
}

Селектор :visited

Выбор всех посещённых ссылок.
Например, установить розовый цвет для всех посещённых ссылок.
HTML:
<a href="#">Ссылка</a>

CSS:
a:visited {
  color: pink;
}

Селектор :active

Выбор элемента, при нажатии на него.
Например, установить желтый цвет текста при нажатии на элемент.
HTML:
<a href="#">Ссылка</a>
<p>...</p>

CSS:
a:active {
  color: yellow;
}
p:active {
  color: yellow;
}

Селектор :hover

Выбор элемента, при поднесении к нему курсора.
Например, установить красный цвет текста элемента, при поднесении к нему курсора.
HTML:
<a href="#">Ссылка</a>
<p>...</p>

CSS:
a:hover {
  color: red;
}
p:hover {
  color: red;
}

Селектор :focus

Селектор :focus предназначен для выбора элемента, который находится в фокусе. Он предназначен для элементов, которые принимают события клавиатуры или других устройств ввода.
Например, установить светло-голубой цвет фона для элемента, который находится в фокусе.
HTML:
<input type="text" name="firstname">

CSS:
input:focus {
  background-color: lightblue;
}

Селектор :lang(язык)

Селектор :lang() используется для выбора элементов с языковым атрибутом, которые имеют указанное значение.
Например, установить желтый цвет фона для всех элементов.<p>, у которых атрибут lang содержит значение "ru".
HTML:
<p lang="ru">...</p>

CSS:
p:lang(ru) {
  background-color: yellow;
}

Селектор :first-child

Псевдокласс :first-child применяется для выбора указанных элементов, если они являются первыми дочерними элементами своего родителя.
Например, выбрать каждый элемент <p>, который является первым дочерним элементом своего родителя.
<!-- Элементы, которые будут выбраны селектором отмечены знаком <= -->
HTML:
<div>
  <h1>...</h1>
  <p>...</p>
  <div>
    <p>...</p>  <=
    <p>...</p>
  </div>
</div>
<div>
  <p>...</p>    <=
  <h3>...</h3>
</div>

CSS:
p:first-child {
    background-color: green;
}

Селектор :first-of-type

Псевдокласс :first-of-type применяется для выбора указанных элементов, если они являются первыми дочерними элементами данного типа (тега) своего родителя. В отличие от псведокласса :first-child, данный псевдокласс :first-of-type учитывает только элементы с указанным тегом.
Например, выбрать каждый элемент <p>, который является первым дочерним элементом данного типа своего родителя.
<!-- Элементы, которые будут выбраны селектором отмечены знаком <= -->
HTML:
<div>
  <h1>...</h1>
  <p>...</p>    <=
  <div>
    <p>…</p>    <=
    <p>...</p>
  </div>
</div>
<div>
  <p>...</p>    <=
  <h3>...</h3>
</div>

CSS:
p:first-of-type {
    background-color: green;
}

Селектор :last-child

Псевдокласс :last-child применяется для выбора указанных элементов, если они являются последними дочерними элементами своего родителя.
Например, выбрать каждый элемент <p>, который является последним дочерним элементом своего родителя.
<!-- Элементы, которые будут выбраны селектором отмечены знаком <= -->
HTML:
<div>
  <h1>...</h1>
  <p>...</p>
  <div>
    <p>…</p>
    <p>...</p>  <=
  </div>
</div>
<div>
  <p>...</p>
  <h3>...</h3>
</div>

CSS:
p:last-child {
    background-color: yellow;
}

Селектор :last-of-type

Псевдокласс :last-of-type применяется для выбора указанных элементов, если они являются последними дочерними элементами данного типа (тега) своего родителя. В отличие от псведокласса :last-child, данный псевдокласс :last-of-type учитывает только элементы с указанным тегом.
Например, выбрать каждый элемент <p>, который является последним дочерним элементом данного типа своего родителя.
<!-- Элементы, которые будут выбраны селектором отмечены знаком <= -->
HTML:
<div>
  <h1>...</h1>
  <p>...</p>    <=
  <div>
    <p>…</p>
    <p>...</p>  <=
  </div>
</div>
<div>
  <p>...</p>    <=
  <h3>...</h3>
</div>

CSS:
p:last-of-type {
    background-color: green;
}

Селектор :only-child

Псевдокласс :only-child применяется для выбора указанных элементов, если они являются единственными дочерними элементами своего родителя.
Например, выбрать каждый элемент <p>, который является единственным дочерним элементом своего родителя.
<!-- Элементы, которые будут выбраны селектором отмечены знаком <= -->
HTML:
<div>
  <h1>...</h1>
  <p>...</p>
  <div>
    <p>…</p>    <=
  </div>
</div>
<div>
  <p>...</p>
  <p>...</p>
  <h3>...</h3>
</div>

CSS:
p:only-child {
    background-color: yellow;
}

Селектор :only-of-type

Псевдокласс :only-of-type применяется для выбора указанных элементов, если они являются единственными дочерними элементами данного типа (тега) своего родителя. В отличие от псведокласса :only-child, данный псевдокласс :only-of-type учитывает только элементы с указанным тегом.
Например, выбрать каждый элемент <p>, который является единственным дочерним элементом данного типа своего родителя.
<!-- Элементы, которые будут выбраны селектором отмечены знаком <= -->
HTML:
<div>
  <h1>...</h1>
  <p>...</p>    <=
  <div>
    <p>…</p>    <=
  </div>
</div>
<div>
  <p>...</p>
  <p>...</p>
  <h3>...</h3>
</div>

CSS:
p:only-of-type {
    background-color: yellow;
}

Селектор :nth-child(n)

Псевдокласс :nth-child(n) применяется для выбора указанных элементов, если они являются n-ыми дочерними элементами своего родителя. Отсчёт элементов начинается с 1.
Например, выбрать каждый элемент <p>, который является вторым дочерним элементом своего родителя.
<!-- Элементы, которые будут выбраны селектором отмечены знаком <= -->
HTML:
<div>
  <h1>...</h1>
  <p>...</p>    <=
  <div>
    <p>...</p> 
    <p>...</p>  <=
  </div>
</div>
<div>
  <p>...</p>
  <h3>...</h3>
</div>

CSS:
p:nth-child(2) {
    background-color: green;
}
В псевдоклассе :nth-child(n) вместо n можно использовать ключевые слова odd и even, которые предназначены для выбора дочерних элементов, которые имеют соответственно чётные или нечётные индексы (индексы дочерних элементов начинаются с 1).
Например, установить различные цвета для четных и нечетных дочерних элементов <p>.
HTML:
<div>
  <p>...</p>    <=красный
  <p>...</p>    <=зелёный
  <p>...</p>    <=красный
  <p>...</p>    <=зелёный
</div>

CSS:
p:nth-child(odd) {
  color: red;
}
p:nth-child(even) {
  color green;
}
Кроме этого в псевдоклассе :nth-child можно вместо n использовать формулу an + b, где a и b – это числа, задаваемые пользователем. А n – это счётчик, который принимает значения: 0, 1, 2, 3, ....
Например, выбрать дочерние элементы <p>, индексы которых кратны 3.
CSS:
p:nth-child(3n) {
  color: red;
}
Например, выбрать дочерние элементы <p>, индексы которых равны 1, 4, 7, 10, ....
CSS:
p:nth-child(3n+1) {
  color: red;
}

Селектор :nth-last-child(n)

Псевдокласс :nth-last-child(n) аналогичен классу :nth-child(n) с разницей в том, что отсчёт дочерних элементов ведётся с конца. Также в псевдоклассе :nth-last-child(n) вместо n можно использовать odd, even или формулу an + b.

Селектор :nth-of-type(n)

Псевдокласс :nth-of-type(n) применяется для выбора указанных элементов, если они являются n-ыми дочерними элементами данного типа (тега) своего родителя. В отличие от псведокласса :nth-child(n), псевдокласс :nth-of-type(n) учитывает только элементы с указанным тегом. Кроме этого, данный псевдокласс :nth-of-type(n) также позволяет использовать ключевые слова odd, even и формулу an+b.
Например, выбрать каждый элемент <p>, который является вторым дочерним элементом данного типа своего родителя.
<!-- Элементы, которые будут выбраны селектором отмечены знаком <= -->
HTML:
<div>
  <h1>...</h1>
  <p>...</p>
  <div>
    <p>...</p>
    <p>...</p>  <=
  </div>
</div>
<div>
  <p>...</p>
  <h3>...</h3>
</div>

CSS:
p:nth-of-type(2) {
    background-color: green;
}

Селектор :nth-last-of-type(n)

Псевдокласс :nth-last-of-type(n) аналогичен классу :nth-of-type(n) с разницей в том, что отсчёт дочерних элементов данного типа (тега) ведётся с конца.

Селектор :root

Псевдокласс :root предназначен для выбора корневого элемента HTML документа, т.е. элемента <html>. В отличие от селектора html {...} данный псевдокласс имеет более высокий приоритет:
Например, установить желтый цвет фона страницы.
CSS:
/*Из-за того, что псевдокласс :root имеет более высокий приоритет, цвет заднего фона документа HTML будет жёлтым.*/
:root {background-color: yellow;}
html {  background-color: green;}

Селектор :empty

Псевдокласс :empty предназначен для выбора пустых элементов, т.е. элементов, которые не содержат другие элементы или какой-либо текст.
Например, установить красный цвет фона и размер для пустых элементов <p>.
<!-- Элементы, которые будут выбраны селектором отмечены знаком <= -->
HTML:
<div>
  <h1>Заголовок</h1>
  <p></p>       <=
  <p>Текст</p>
  <p><span></span></p>
</div>

CSS:
p:empty {
    width: 50px;
    height: 10px;
    background-color: red;
}

Селектор :target

Псевдокласс :target предназначен для выбора элемента с идентификатором (например: part1), который указан в URL после символа #.
Например, установить красный цвет текста и размер шрифта для элемента идентификатор которого указан в URL после символа #.
HTML:
<p id="part1">...</p>
<p id="part2">...</p>

CSS:
:target {
  color: red;
  font-size: 24px;
}
Если URL страницы "http://test.org/article#part1", то будет выбран элемент <p>, имеющий идентификатор id="part1". Если URL страницы "http://test.org/article#part2", то будет выбран элемент <p>, имеющий идентификатор id="part2".

Селектор :enabled

Псевдокласс :enabled предназначен для выбора элементов формы, которые доступны для управления, т.е. они могут отвечать на действия пользователей.
Например, установить желтый цвет фона для элементов <input>, которые доступны для управления.
HTML:
<input type="text" value="Введите ФИО:">

CSS:
input:enabled {
  background-color: yellow;
}

Селектор :disabled

Псевдокласс :disabled предназначен для выбора элементов формы, которые недоступны для управления, т.е. они не могут отвечать на действия пользователей.
Например, установить желтый цвет фона для элементов <input>, которые не доступны для управления.
HTML:
<input type="text" disabled="disabled" value="Введите возраст:">

CSS:
input:disabled {
  background-color: yellow;
}

Селектор :checked

Псевдокласс :checked предназначен для выбора элементов radio (<input type="radio">), checkbox (<input type="checkbox">) и option, которые находятся во включенном положении.
Например, выбрать элементы, которые находятся во включенном положении, т.е. checked.
HTML:
<input type="checkbox" checked="checked" value="Yes">

CSS:
:checked {
  height: 30px;
  width: 30px;
}

Селектор :not(selector)

Псевдокласс :not(селектор) предназначен для выбора всех элементов, которые не попадают под действие указанного селектора.
Например, выбрать все элементы на веб-странице, кроме <div>.
CSS:
*:not(div) {
color: green;
}
Например, выбрать все элементы <div> за исключением того, который имеет id="footer".
CSS:
div:not(#footer) {
padding: 15px;
}


   HTML и CSS 0    1793 0

Комментарии (2)

  1. Евгений # 0
    Идентификаторы
    написано

    CSS:
    .footer {

    Должно быть наверное #footer { ??
    1. Александр Мальцев # 0
      Да, опечатка вышла.
      Спасибо, поправил.

    Вы должны авторизоваться, чтобы оставлять комментарии.