Есть несколько основных селекторов, которые нужно запомнить. Остальные используются реже и можно сверяться по статье, чтобы освежить память.
Рассмотрим основные селекторы.
Селектор выделяет каждый элемент на странице. Часто используется для сброса значений элементов значения margin и padding. Считается, что селектор слишком сильно грузит браузер, поэтому стоит его избегать.
* {
margin: 0;
padding: 0;
}
Можно использовать для выделения дочерних элементов родительского элемента независимо от их типа.
#container * {
border: 1px solid black;
}
Самый простой селектор. Выбираем определённые теги страницы.
body { /* Свойства CSS */ }
a {
color: red;
}
ul {
margin-left: 0;
}
Особо стоит обратить внимание на тег body. На первый взгляд, в примере будет выбран один элемент body. Однако, из-за каскадной специфики CSS все свойства заданные в элементе, будут применены ко всем его дочерним элементам, даже если мы явно не укажем их стиль.
CSS-селектор класса указывается через точку. Используйте классы, чтобы применить стиль к нескольким однотипным элементам.
.block{
color: magenta;
}
Знак решётки выделит элемент с указанным идентификатором id.
#container {
width: 960px;
margin: auto;
}
Селектор :root применяет свойства ко всем HTML-элементам. Вы можете использовать :root, чтобы установить значения CSS по умолчанию для всего документа.
:root { font-family: Arial, sans-serif; }
Селектор :root также часто используется для глобального хранения CSS-переменных. Создайте CSS-переменную с именем --red-color и присвойте ей значение цвета red. Учтите, что все имена переменных CSS должны начинаться с двойного дефиса:
:root { --red-color: red; }
Теперь вы можете использовать CSS-переменную --red-color в качестве значения в стандартных селекторах CSS:
div { color: var(--red-color) ; }
Селектор (*) выполняет те же функции (см. выше). Единственное отличие состоит в том, что селектор * нацелен абсолютно на все элементы в документе, а :root только на контейнер документа без его дочерних элементов.
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 и 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, который идет сразу после элемента Х. В примере будет выбран третий параграф, который идёт сразу после 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>
Селектор похож на 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>
Общий синтаксис
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-xxx в отдельной статье.
div p:only-child { color: red; }
Позволяет выбрать элементы, которые являются единственными дочерними. Например, применим приведенный выше стиль к этому html-коду:
<div>
<p> Один параграф.</p>
</div>
<div>
<p> Два параграфа </p>
<p> Два параграфа </p>
</div>
Будет выбран p только первого div, потому что он единственный дочерний элемент.
li:only-of-type { font-weight: bold; }
Очень интересный псевдокласс. Он затрагивает элементы, не имеющие соседей в пределах родительского элемента. В качестве примера выберем ul только с одним элементом в списке.
Единственное решение заключается в использовании only-of-type.
ul > li:only-of-type { font-weight: bold; }
Выбирает первый элемент заданного типа.
<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. Остальные ссылки останутся не затронутыми.
a[title] { color: green; }
Все ссылки, которые ссылаются на указанный сайт, будут выбраны. Все остальные ссылки останутся неизменными.
a[href="http://webmaster.alexanderklimov.ru"] {
color: #ffcc00;
}
Если страница ведёт не на домен, а на страницу домена, то можно использовать регулярные выражения.
Звезда обозначает, что искомое значение должно появляться где-нибудь в атрибуте. Таким образом, CSS-селектор охватывает webmaster.alexanderklimov.ru, http://webmaster.alexanderklimov.ru/contact и т.д.
Если ссылка ведет на какой-то сторонний ресурс, в адресе которого присутствует alexanderklimov, нужно использовать "^"или "&", для ссылки на начало и конец строки соответственно.
a[href*="alexanderklimov"] { color: # 1f6053; }
Позволяет отображать маленький значок рядом с внешними ссылками? "^" - наиболее часто используемый в регулярных выражениях символ. Он используется для обозначения начала строки. Если мы хотим охватить все тэги, у которых href начинается с http, нам надо использовать CSS-селектор, приведенный выше.
Обратите внимание, что мы не ищем "http://". Это не правильно, поскольку не учитываются адреса, начинающиеся с https://.
a[href^="http"] {
background: url(path/icon.png) no-repeat;
padding-left: 10px;
}
Если мы хотим задать стиль только для ссылок, ведущих на фотографию? Нужно искать конец строки.
a[href$=".jpg"] { color: red; }
Мы используем символ регулярного выражения "$" для обозначения конца строки. В данном мы ищем ссылки, которые ссылаются на jpg-файлы, или url-ы, в конце у которых стоит ".jpg".
Как же нам теперь написать 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; }
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; }