Меню

juktastockCSS CSS Selector

CSS-селекторы \ псевдоселекторы

X, Y - любой атрибут(в т.ч. не только официально поддерживаемые) или любое имя

*

* {
 margin: 0;
 padding: 0;
}

Символ звездочки позволяет выбрать все элементы на странице. Многие веб-разработчики используют это для "обнуления" всех внешних и внутренних отступов.

Также символ * можно использовать для дочерних элементов объекта.

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

Этот код нацелен на все элементы, которые являются дочерними по отношению к блоку с идентификатором container.


Совместимость IE6+ Firefox Chrome Safari Opera

#X

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

Символ решетки позволяет нам отбирать элементы по идентификатору. Это один из наиболее распространенных способов отбора элементов, однако будьте осторожны при его использовании.

"Спросите себя: Мне точно необходимо использовать id для какого-то элемента, чтобы сослаться на него?"

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


Совместимость IE6+ Firefox Chrome Safari Opera

.X

.error {
  color: red;
}

Это селектор класса. Разница между id и классами в том, что с помощью классов можно выбирать сразу несколько элементов. Используйте классы, если Вам нужно применить один стиль к группе элементов.

В противном случае используйте id для нахождения "иголки в стоге сена" и применения стиля только к одному конкретному объекту.


Совместимость IE6+ Firefox Chrome Safari Opera

X Y

li a {
  text-decoration: none;
}

Следующий часто используемый тип селектора - селектор потомка. Его следует использовать, когда нужно производить более точечный отбор элементов.

К примеру, как быть, если нужно выбрать не все тэги ссылок, а только те, что находятся внутри неупорядоченного списка? Это как раз тот случай, когда следует использовать селектор потомка.

"Совет: Если Ваш селектор похож на X Y Z A B.error, то Вы, вероятно, что-то делаете на так. Всегда спрашивайте себя, действительно ли это самый простой способ"


Совместимость IE6+ Firefox Chrome Safari Opera

X

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

Что, если Вы хотите сослаться на все элементы(например, тэги HTML) определенного типа на странице, если у них нет id или классов? - Используйте селекторы типа. Если Вам нужно выбрать все неупорядоченные списки, используйте ul{}, если ссылки, то a{}.


Совместимость IE6+ Firefox Chrome Safari Opera

X + Y

ul + p {
   color: red;
}

Это так называемый смежный селектор. В этом случае каждый параграф следующий сразу после каждого элемента ul будет красного цвета.


Совместимость IE7+ Firefox Chrome Safari Opera

X > Y

#container > ul {
  border: 1px solid black;
}

Различие между X Y и X > Y в том, что последний выберет только прямых потомков. Рассмотрим следующий пример:

<div id="container">
    <ul>
       <li>Элемент списка
         <ul>
            <li>Потомок</li>
         </ul>
       </li>
       <li>Элемент списка</li>
       <li>Элемент списка</li>
       <li>Элемент списка</li>
    </ul>
</div>

Селектор #container > ul выберет только те элементы ul, которые являются прямыми потомками блока div с идентификатором container. Т.е. в данном случае этот селектор не отберет элемент ul, который является потомком первого элемента li.


Совместимость IE7+ Firefox Chrome Safari Opera

X ~ Y

ul ~ p {
   color: red;
}

Эта комбинация сестринских (сиблинговых) элементов похожа на X + Y, но она менее строгая. Если в случае ul + p будут выбраны только первые элементы p, следующие за ul (т.е. наблюдается смежность в выборе), то рассматриваемый нами сейчас селектор более общий.

В нашем случае он отберет все элементы p, следующие за элементом ul.


Совместимость IE7+ Firefox Chrome Safari Opera

X:checked

input[type=checkbox]:enabled + label {
  color: red;
}
input[type=checkbox]:disabled + label {
  color: orange;
}
input[type=checkbox]:checked + label {
  text-decoration: line-through;
  color: black;
}
form input:default + label {
  font-weight: bold;
}
form input:default + label:after {
  content: " (default)";
  font-style: italic;
}




Отбирает те элементы, которые были отмечены, например, радиокнопку или чекбокс.

:enabled - доступный (не заблокированный) элемент

:disabled - отключен, заблокирован

:checked - изначально включен

:default - соответствует одному или нескольким элементам, которые по умолчанию относятся к группе связанных элементов. Это также можно комбинировать с типом кнопки сброса. Подробнее: exabyte.ws


использовать псевдо классы для соответствия действительным значениям ввода или нет непосредственно с помощью CSS, а также проверки наличия каких-либо элементов перед отправкой формы.

:valid -

:invalid -

:required -

:optional - (т. е. не требуется)

* Если адрес электронной почты недействителен, граница формы красная, его нельзя оставить пустым. См. код. Также обратите внимание, как мы можем связать псевдо-классы (например :required:invalid), чтобы достичь того, что нам нужно.






Затем у нас есть два псевдокласса, которые могут совпадать, если элемент формы (который поддерживает min и max атрибуты) находится в диапазоне или нет.

:in-range

:out-of-range




:read-only :read-write :placeholder-shown находят сопоставлять элементы, доступные только для чтения, или доступные для записи (редактируемые). Согласованные элементы не обязательно должны формировать поля ввода, как показано в примере.

Стандартный текст
Однако вы можете редактировать этот контент! Перейдите и нажмите меня, чтобы изменить текст.

:placeholder-shown будут сопоставляться элементы, которые еще не взаимодействовали, и по-прежнему отображать текст закладок по умолчанию. ! Этот конкретный селектор следует использовать с осторожностью, поскольку он пока не поддерживается широко.


Совместимость IE9+ Firefox Chrome Safari Opera

[class|="header"]

[class|="header"] {
    color: red;
}

Группировка свойств классов. Задаёт свойства для целой группы классов (куда будут входить все подклассы с модификаторами), используя селектор атрибута с префиксом. В примере свойство применится ко всем классам, начинающимся с символов header, например headers header-simple, но не pheader


Совместимость

X:after X:before

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

.clearfix:after {
    content: "";
    display: block;
    clear: both;
    visibility: hidden;
    color: red;
    height: 0;
    }

.clearfix {
   *display: inline-block;
   _height: 1%;
}

Данный пример показывает, как с помощью псевдо-класса :after после блока с классом .clearfix создаётся пустая строка, после чего очищается. Хороший метод, когда невозможно применить overflow: hidden.


Совместимость IE8+ Firefox Chrome Safari Opera

X:not(selector)

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

Отрицание может быть также очень полезным. Предположим, я хочу выбрать все блоки div, кроме одного с идентификатором container. Для этого отлично подойдет код выше.

Если же мне нужно выбрать все элементы, кроме тэгов параграфов, то можно написать так:

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

Совместимость IE9+ Firefox Chrome Safari Opera

X:target

h2:target {
  background: #fc0;
}

:target Селектор выбирает элемент с идентификатором, который соответствует части текущего URL, иными словами, к идентификатору, который указан в адресной строке браузера. Например, может использоваться для выделения части страницы, на которую была сделана ссылка из оглавления. (Нажми ссылки)

История 1

История о том..

История 2

История о ..

X:matches()

Если у вас большой селектор, вы можете упростить его :matches(). Например, если у вас был следующий селектор:

nav p.content, 
header p.content, 
main p.content, 
sidebar p.content, 
footer p.content { 
  margin: 15px; 
  padding: 10px; 
}
Тогда его можно упростить так, и это бужет эквивалентно:
:matches(nav, header, main, sidebar, footer) p:content {
  margin: 15px;
  padding: 10px;
}

Совместимость Selectors Level 4

X::(pseudoContent)

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

Этот кусок кода найдет все параграфы на странице и применит к первой букве каждого из них указанные стили. Часто это используется для создания эффекта "газетного заголовка".

Выбираем первую букву параграфа:

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

Аналогично предыдущему примеру, но в данном случае будет выбрана первая строка каждого параграфа.

Выбираем первую строку параграфа:

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

Псевдоэлемент ::selection позволяет применить стили к части документа, который был выделен пользователем (например, с помощью мыши). CSS псевдоэлемент ::first-line применяет стили к первой строке блочного элемента.

Выбираем выделенный текст:

p::selection {
   background-color: #AAA;
}

Совместимость IE6+ Firefox Chrome Safari Opera

X:nth-child(n)

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

Помните времена, когда мы не имели возможности обратиться к конкретному порядковому элементу-потомку? Данный псевдо-класс решает эту проблему!

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

Мы можем даже выбирать группы элементов-потомков. К примеру, чтобы выбрать каждый четвертый элемент списка, нужно использовать конструкцию: li:nth-child(4n).

ul:nth-child(2)- второй дочерний элемент
ul:nth-child(4n) - каждый 4-й дочерний элемент (4, 8, 12, ...)
ul:nth-child(2n + 1) - каждый второй дочерний элемент, смещенный на один (1, 3, 5, ...)
ul:nth-child(3n — 1) - каждый 3-й дочерний элемент, смещенный отрицательным (2, 5, 8, ...)
ul:nth-child(odd) - нечетный номер (1, 3, 5, ...)
ul:nth-child(even) - четный номер (2, 4, 6, ...)


Совместимость IE9+ Firefox Chrome Safari

X:nth-last-child(n)

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

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


Совместимость IE9+ Firefox 3.5+ Chrome Safari Opera

X:nth-of-type(n)

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

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

Представьте, что на странице есть пять неупорядоченных списков. Если Вам нужно применить стили только к третьему списку, но у него нет уникального идентификатора и иных "зацепок", то можно воспользоваться псевдо-классом nth-of-type(n). В коде выше показан способ придания стиля только третьему неупорядоченному списку.


Совместимость IE9+ Firefox 3.5+ Chrome Safari

X:nth-last-of-type(n)

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

Да, для полноты картины есть и такой вариант. Так можно выбрать n-ный элемент определенного типа с конца.


Совместимость IE9+ Firefox 3.5+ Chrome Safari Opera

X:first-child

ul li:first-child {
   border-top: none;
}

Этот псевдо-класс позволяет выбрать только первого потомка родительского элемента. Часто используется для удаления границ первого и последнего элементов списка.

К примеру, если у вас есть список рядов, каждый из которых имеет border-top и border-bottom, то последний и первый элементы списка будут немного выбиваться из общего строя.

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


Совместимость IE7+ Firefox Chrome< Safari Opera

X:last-child

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

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


Совместимость IE9+ Firefox Chrome Safari Opera

X:only-child

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

Честно говоря, это довольно редко используемый псевдо-класс, но, тем не менее, он тоже бывает полезен. Он позволяет выбрать Вам те элементы, которые являются единственными потомками для своих родителей.

В нашем примере стиль будет применен только к параграфу, который является единственным потомком блока div.

Давайте рассмотрим для наглядности такую разметку:

<div><p>Здесь идет единственный в блоке параграф.</p></div>

<div>
   <p>Здесь идет первый параграф в блоке.</p>
   <p>Здесь идет второй параграф в блоке.</p>
</div>

В этом случае параграфы во втором блоке div выбраны не будут. Стиль будет применен только к параграфу из первого блока div.


Совместимость IE9+ Firefox Chrome Safari Opera

X:only-of-type

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

Этот псевдо-класс выбирает элементы, которые не имеют сестринских элементов в содержащем их контейнере. Например, давайте выберем все ul, которые содержат одинокие li.

Вы могли бы написать ul li, но этот способ выберет все элементы li. Единственный способ - использовать only-of-type.

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

Совместимость IE9+ Firefox 3.5+ Chrome Safari Opera

X: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

Есть много способов решить данную задачу. Рассмотри лишь некоторые из них. Начнем с использования first-of-type:

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

Данный код гласит: "Найди первый неупорядоченный список на странице, затем найди только его прямых потомков, являющихся элементами li. После этого выбери только второй по порядку элемент li."

Решение 2

Другой вариант - воспользоваться смежным селектором:

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

Здесь мы находим ul, следующий непосредственно за тэгом параграфа, после чего находим самый последний его дочерний элемент.

Решение 3

Можно еще немного поиграть с селекторами и поступить таким образом:

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

Сейчас мы уже получаем первый элемент ul на странице, затем ищем самый первый элемент li, но начиная с конца.


Совместимость IE9+ Firefox 3.5+ Chrome Safari Opera

^ | $ * ~

Использование операторов регулярных выражений (на примере аттрибута)

a[attr*="val"] {
  color: red;
}
  a[attr^=val] - Атрибут начинается со значения. 
  a[attr|=val] - Атрибут начинается со значения ИЛИ сначала в списке, разделенном тире. 
  a[attr$=val] - Атрибут заканчивается значением. 
  a[attr*=val] - Значение происходит в любом месте атрибута. 
  a[attr~=val] - Значение соответствует атрибуту в пробельном списке.

a[attr|=val] соответствуют значению, за которым следует строка, разделенная тире. Это может быть полезно для соответствия языковых атрибутов. например

<p lang="en-us">
.

Согласование расширений файлов упрощается, a[attr$="val"] вместе ::after вы можете легко отображать сопоставленный файл. Обратите внимание на использование attr()и конкатенацию, чтобы присоединиться к ней со статической строкой.

a[data-file$="mp3"]::after {
  content: " (" attr(data-file) ")";
    color: red; 
}

a[attr*=val] показывает, как можно сосопоставить конкретный домен, независимо от того, какой протокол или субдомен используется.

a[href*="mysite.ru"] {
    color: red; 
}

a[attr~=val] отлично подходит для сопоставления значения в атрибуте, составленном из списка значений, разделенных пробелами. Это соответствует совпадению всего слова, а не фрагментам слов, так как например *=оператор делающий выборку по совпадению символов.

Все приведенные выше примеры селекторов атрибутов чувствительны к регистру. Если вставить i перед закрывающими квадратными скобками, то регистр не учитывается.

a[title|="tree" i] {
    color: red;
}

Совместимость IE7+ Firefox Chrome Safari Opera

X[attr]

a[title] {
   color: green;
}

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


Совместимость IE7+ Firefox Chrome Safari Opera

X[attr=val]

a[href="http://www.codeharmony.ru"] {
  color: red;
}

Код выше позволит придать стиль всем ссылкам, атрибут href у которых равен http://www.codeharmony.ru. Эти ссылки будут красного цвета. Остальные ссылки не получат данного стиля.

Это работает хорошо, но это немного негибко. Что, если ссылка на самом деле ведет на Codeharmony.ru но, возможно, адрес указан, как codeharmony.ru а не http://www.codeharmony.ru? В таких случаях мы можем использовать основы регулярных выражений.


Совместимость IE7+ Firefox Chrome Safari Opera

X[attr*=val]

a[href*="codeharmony"] {
  color: red;
}

Звездочка означает, что искомое значение может находиться в любой части атрибута href. Таким образом, мы можем отобрать и http://www.codeharmony.ru и www.codeharmony.ru и codeharmony.ru.


Совместимость IE7+ Firefox Chrome Safari Opera

X[attr^=val]

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

^ (карат) обычно используется в регулярных выражениях для обозначения начала строки. Если мы хотим отобрать ссылки, у которых атрибут href начинается с http, то мы можем использовать селектор из примера выше.

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


Совместимость IE7+ Firefox Chrome Safari Opera

X[attr$=val]

a[href$=".jpg"] {
   border: 1px solid red;
}

Например, ниже вставлены две иллюстрации logo-robot.png и logo-robot.jpg, и у есть jpg красная кайма:

Используем регулярное выражение и символ $ для того, чтобы обозначить конец строки. В данном примере мы ищем все ссылки, которые ссылаются на картинки с расширением .jpg. Разумеется, такой подход не будет работать для картинок с расширениями .gif, .png и т.д.

Варианты:

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  img[src$=".svg"] {
    border: 1px solid red;
  }
}

Совместимость IE7+ Firefox Chrome Safari Opera

var>X[attr|="val"]

a[title|="home"] {
    color: red;
}

a[attr|=val] соответствуют значению, за которым следует строка, разделенная тире, т.е. применяется к точному соответствию символов home перед дефисом, т.о. будет найдено только "home-1-home.ru" и "home-1-dhome.ru"

Пример: home.ru 1-home.ru home-1-home.ru home-1-dhome.ru rhome-1-dome.ru rome-home-1-dome.ru


Совместимость

X[data-*="foo"]

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;
}

Совместимость IE7+ Firefox Chrome Safari Opera

X[foo~="bar"]

a[data-info~="external"] {
   color: red;
}

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

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

<a href="path/to/image.jpg" data-info="external image">Кликни сюда</a>

Используя данный прием мы можем делать выборки с нужными нам комбинациями:

/* Отобрать атрибут data-info, который содержит значение external */
a[data-info~="external"] {
   color: red;
}

/* и отобрать атрибут data-info, который содержит значение image */
a[data-info~="image"] {
  border: 1px solid black;
}

Совместимость IE7+ Firefox Chrome Safari Opera


jukta stock code HTML CSS JS

Jukta Design SV Jukta Engine licensing CC BY-NC 4.0 2016