Селекторы

Псевдоэлементы
Псевдоклассы

Есть несколько основных селекторов, которые нужно запомнить. Остальные используются реже и можно сверяться по статье, чтобы освежить память.

Рассмотрим основые селекторы.

*

Селектор выделяет каждый элемент на странице. Часто используется для сброса значений элементов значения margin и padding. Считается, что селектор слишком сильно грузит браузер, поэтому стоит его избегать.


* { 
    margin: 0;
    padding: 0;
}

Можно использовать для выделения дочерних элементов.


#container * {
    border: 1px solid black; 
}

Селектор тегов

Самый простой селектор. Выбираем определённые теги страницы.


a { 
    color: red; 
}
ul { 
    margin-left: 0;
}

. (класс)

CSS-селектор класса. Используйте классы, чтобы применить стиль к нескольким однотипным элементам.


.block{
    color: magenta;
}

# (идентификатор)

Знак решетки выделит элемент с указанным идентификатором id.


#container { 
    width: 960px; 
    margin: auto; 
}

Х Y (пробел)

CSS-селектор потомков. Если надо выбрать элементы определенного типа из множества дочерних элементов, используете этот селектор. Например, вам надо выделить все ссылки, которые находятся в элементе li.


li a {
    text-decoration: none;
}

Все остальные ссылки не будут затронуты.

Потомок может быть вложен несколько раз. Например, третий параграф вложен в section, а затем в div, и будет считаться потомком и выводиться жёлтым цветом.


div p {
  background-color: yellow;
}

<div>
  <p>Paragraph 1 in the div.</p>
  <p>Paragraph 2 in the div.</p>
  <section><p>Paragraph 3 in the div.</p></section>
</div>

Избегайте вложенных селекторов типа Y Z A B.block.

Х > Y (дочерние элементы)

Разница между стандартными Х Y и X > Y состоит в том, что рассматриваемый CSS-селектор будет выбирать только непосредственные дочерние элементы.


div > p {
  background-color: yellow;
}


<div>
  <p>Paragraph 1 in the div.</p>
  <p>Paragraph 2 in the div.</p>
  <section><p>Paragraph 3 in the div.</p></section> <!-- not Child but Descendant -->
  <p>Paragraph 4 in the div.</p>
</div>

<p>Paragraph 5. Not in a div.</p>
<p>Paragraph 6. Not in a div.</p>

Будут выбраны первый, второй и четвёртый абзацы. Третий является потомком. Пятый и шестой - не входят в div

Х+Y

Выделяет последующий элемент. Он будет выбирать только элемент типа Y, который идет сразу после элемента Х. В примере будет выбран третий параграф, который идёт сразу после div. Первый и второй входят в div, четвёртый идёт после параграфа.


div + p {
  background-color: yellow;
}


<div>
  <p>Paragraph 1 in the div.</p>
  <p>Paragraph 2 in the div.</p>
</div>

<p>Paragraph 3. Not in a div.</p>
<p>Paragraph 4. Not in a div.</p>

Х ~ Y

Селектор похож на X + Y, однако, является менее строгим. При использовании ul + p можно выбрать только первый элемент, идущий за Х. В данном случае будут выбраны третий и четвёртый - они идут после div. Первый идёт до div, второй находится внутри div.


div ~ p {
  background-color: yellow;
}


<p>Paragraph 1.</p>

<div>
  <p>Paragraph 2.</p>
</div>

<p>Paragraph 3.</p>
<code>Some code.</code>
<p>Paragraph 4.</p>

Псевдоэлементы

Мы можем использовать псевдоэлементы, чтобы оформлять фрагменты элементов, такие как первая строка, или первая буква. Имейте в виду, что они должны быть применены к элементам уровня блока для того, чтобы вступили в силу.

Псевдоэлемент задаётся двумя двоеточиями: ::. Они не видны на экране, поэтому называются псевдоэлементами.

Для совместимости с существующими таблицами стилей, браузер должен понимать прежнее обозначения псевдо элементов с одним двоеточием, введенные в CSS 1, 2 (:first-line, :first-letter, :before and :after). Эта совместимость не допускается для новых псевдоэлементов, введенных в этой спецификации.

Применим стили к первой линии параграфа через ::first-line. Псевдоэлемент применим только к блочным элементам. Можно менять свойства шрифта, цвета, фона, текста.


p::first-line {
   font-weight: bold;
   font-size: 1.2em;
}

Выбираем первую букву в параграфе через ::first-letter. Псевдоэлемент применим только к блочным элементам. Можно менять свойства шрифта, цвета, фона, текста, отступы.


p::first-letter {
    float: left;
    font-size: 2em;
    font-weight: bold;
    font-family: cursive;
    padding-right:2px;
}

Этот код выберет все параграфы, и в них в свою очередь выберет первые буквы и применит к ним этот стиль.

Псевдоэлементы можно комбинировать с классами.


p.intro::first-letter {
  color: #ff0000;
  font-size:200%;
}

Также можно применить несколько псевдоэлементовв к одному элементу.


p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}

p::first-line {
  color: #0000ff;
  font-variant: small-caps;
}

Псевдоэлементы ::before и ::after позволяют добавлять содержимое (стили) до и после элемента, к которому были применены.

Для добавление контента внутри псевдоэлементов можно воспользоваться CSS-свойством content.

К псевдоэлементом можно применять такие же стили, как и к обычным: изменение цвета, добавление фона, регулировка размера шрифта, выравнивание текста и т.д.

Добавим изображение кота к заголовкам первого уровня перед текстом и к заголовкам второго уровня после текста.


h1::before {
  content: url(cat.png);
}

h2::after {
  content: url(cat.png);
}

Многие познакомились с этими псевдоклассами при работе с "clear-fix hack".


.clearfix::after {
    content: "";
    display: block;
    clear: both;
    visibility: hidden;
    font-size: 0;
    height: 0;
    }
.clearfix {
    *display: inline-block;
    _height: 1%;
}

Этот хак использует ::after чтобы добавить пробел после элемента, и запретить его обтекание.

Псевдоэлемент ::selection действует на выделенный пользователем текст.


::selection {
  color: red;
  background: yellow;
}

Псевдоклассы

Общий синтаксис


selector:pseudo-class {
  property:value;
}

У ссылок есть несколько собственных псевдоклассов. Желательно соблюдать приведённый порядок.


/* unvisited link */
a:link {
  color: #FF0000;
}

/* visited link */
a:visited {
  color: #00FF00;
}

/* mouse over link */
a:hover {
  color: #FF00FF;
}

/* selected link */
a:active {
  color: #0000FF;
}

Псевдокласс :link служит для выделения всех ссылок, на которые еще не кликнули. Псевдокласс :visited выбирает уже посещённые ссылки.

Выбранная ссылка управляется через :active. При наведении на ссылку мышкой применяются стили псевдокласса :hover.

Псевдокласс можно комбинировать с классом.


a.highlight:hover {
  color: #ff0000;
}

Псевдокласс :hover применим не только к ссылкам, но и к другим элементам.

При наведении мыши на блок, он поменяет свой цвет.


div:hover {
  background-color: blue;
}

Если подключить стили видимости, то можно добиться эффекта появления и исчезновения элемента при наведении мыши.


p {
  display: none;
  background-color: yellow;
  padding: 20px;
}

div:hover p {
  display: block;
}

Псевдокласс :frist-child выбирает первый дочерний элемент. Поменяем цвет в первом параграфе.


p:first-child {
  color: blue;
} 

<p>This is some text.</p>
<p>This is some text.</p>

Меняем цвет у первого i в каждом параграфе.


p i:first-child {
  color: blue;
} 

<p>I am a <i>strong</i> person. I am a <i>strong</i> person.</p>
<p>I am a <i>strong</i> person. I am a <i>strong</i> person.</p>

Меняем все i только в певром параграфе. Второй параграф не задействован.


p:first-child i {
  color: blue;
} 


<p>I am a <i>strong</i> person. I am a <i>strong</i> person.</p>
<p>I am a <i>strong</i> person. I am a <i>strong</i> person.</p>

Псевдокласс :lang позволяет задать специальные правила для различных языков.

Зададим стиль для кавычек.


q:lang(no) {
  quotes: "~" "~";
}


<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>

В противоположность :first-child псевдокласс :last-child выбирает последний дочерний элемент.


ul > li:last-child { color: green; }

Псевдокласс :checked выделяет только элементы пользовательского интерфейса, такие как переключатель или флажок. Причем те, которые отмечены/выбраны.


input[type=radio]:checked { border:1px solid black; }

Псевдокласс отрицания :not(selector) бывает очень полезным. Нужно выбрать все div, за исключением того, который имеет id = container.


div:not(#container) { color: blue; }

Можно выбрать все элементы, за исключением p.


*:not(p) { color: green; }

:nth-child(n)


li:nth-child(3) { color: red; }

Можно выбрать третий дочерний элемент. Обратите внимание, что nth-child принимает целое число в качестве параметра, однако отсчет ведется не с 0. Если вы хотите выбрать второй пункт списка, используйте li:nth-child(2).

Можно выбрать каждый четвертый элемент списка, просто написав {0}li:nth-child(4n){/0}.

:nth-last-child(n)


li:nth-last-child(2) { color: red; }

Что делать, если у вас огромный список элементов, а нем нужно выбрать третий элемент с конца? Вместо того, чтобы писать li:nth-child(397), можно использовать nth-last-child. Этот метод почти идентичен приведенному выше, однако отсчет ведется с конца.

:nth-of-type(n)


ul:nth-of-type(3) { border: 1px solid black; }

Позволяет выбрать не дочерний элемент, а элемент определенного типа. Представьте себе, что на странице пять неупорядоченных списков. Если вы хотите применить стиль только к третьему ul, не имеющему уникального id, нужно использовать nth-of-type.

:nth-last-of-type(n)


ul:nth-last-of-type(3) { border: 1px solid black; }

Мы можем также использовать nth-last-of-type, отсчитывая элементы с конца.

:only-child


div p:only-child { color: red; }

Позволяет выбрать элементы, которые являются единственными дочерними. Например, применим приведенный выше стиль к этому html-коду:


<div>
    <p> Один параграф.</p>
</div>
<div>
    <p> Два параграфа </p>
    <p> Два параграфа </p>
</div>

Будет выбран p только первого div, потому что он единственный дочерний элемент.

:only-of-type


li:only-of-type { font-weight: bold; }

Очень интересный псевдокласс. Он затрагивает элементы, не имеющие соседей в пределах родительского элемента. В качестве примера выберем ul только с одним элементом в списке.

Единственное решение заключается в использовании only-of-type.


ul > li:only-of-type { font-weight: bold; }

:first-of-type

Выбирает первый элемент заданного типа.


<div>  
    <p> Параграф </p>  
    <ul>     
        <li> Пункт 1 </li>     
        <li> Пункт 2 </li>  
    </ul>  
    <ul>     
        <li> Пункт 3 </li>     
        <li> Пункт 4 </li>  
    </ul>
<div>

Как выделить пункт 2.

Решение 1


ul:first-of-type > li:nth-child(2) { font-weight: bold; }

Решение 2


p + ul li:last-child { font-weight: bold; }

Решение 3


ul:first-of-type li:nth-last-child(1) { font-weight: bold; }

[title] (атрибуты)

Выбираем все ссылки, имеющие атрибут title. Остальные ссылки останутся не затронутыми.


a[title] { color: green; }

[href="Foo"]

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


a[href="http://webmaster.alexanderklimov.ru"] {
    color: #ffcc00;
}

Если страница ведёт не на домен, а на страницу домена, то можно использовать регулярные выражения.

X [HREF *= "webmaster.alexanderklimov.ru"]

Звезда обозначает, что искомое значение должно появляться где-нибудь в атрибуте. Таким образом, CSS-селектор охватывает webmaster.alexanderklimov.ru, http://webmaster.alexanderklimov.ru/contact и т.д.

Если ссылка ведет на какой-то сторонний ресурс, в адресе которого присутствует alexanderklimov, нужно использовать "^"или "&", для ссылки на начало и конец строки соответственно.


a[href*="alexanderklimov"] { color: # 1f6053; }

X[href^="http"]

Позволяет отображать маленький значок рядом с внешними ссылками? "^" - наиболее часто используемый в регулярных выражениях символ. Он используется для обозначения начала строки. Если мы хотим охватить все тэги, у которых href начинается с http, нам надо использовать CSS-селектор, приведенный выше.

Обратите внимание, что мы не ищем "http://". Это не правильно, поскольку не учитываются адреса, начинающиеся с https://.


a[href^="http"] {
   background: url(path/icon.png) no-repeat;
   padding-left: 10px;
}

X [href$=". JPG"]

Если мы хотим задать стиль только для ссылок, ведущих на фотографию? Нужно искать конец строки.


a[href$=".jpg"] { color: red; }

Мы используем символ регулярного выражения "$" для обозначения конца строки. В данном мы ищем ссылки, которые ссылаются на jpg-файлы, или url-ы, в конце у которых стоит ".jpg".

X[data-*="foo"]

Как же нам теперь написать CSS-селектор, который бы выделял ссылки на все виды изображений.


a[data-filetype="image"]{ color: red; }

Неудобный вариант.


a[href$=".JPG"],
a[href$=". JPEG"],
a[href$=".PNG"],
a[href$=".GIF"] {  
color: red;
}

Другим возможным решением является применение пользовательских атрибутов. Добавим собственный атрибут data-filetype в каждую ссылку.


<a href="path/to/image.jpg" data-filetype="image"> Ссылка на изображение </a>

Теперь мы можем выделить такие ссылки при помощи данного селектора:


a[data-filetype="image"] { color: red; }

X[foo~="bar"]


a[data-info~="external"] { color: red; }
a[data-info~="image"] { border: 1px solid black; }

Тильда (~) позволяет выделить определенный атрибут из списка атрибутов, разделенных запятой.

Например, мы можем задать наш собственный атрибут data-info, в котором указывать несколько ключевых слов через пробел. Так, мы можем указать, что ссылка является внешней и что она ссылается на изображение.


<a href="path/to/image.jpg" data-info="external image"> Click Me </a>

Напишем стили.


/ * Выбираем ссылки с атрибутом data-info, содержащий значение "external" * /
a[data-info~="external"] { color: red; }
/ * И которые содержат значения "image" * /
a[data-info~="image"] { border: 1px solid black; }
Реклама