что значит в селекторе css

Что вы не знали о селекторах CSS?

CSS Selectors

Объясняю многие селекторы применимо к указанному примеру.

.class

Выбирает, объединяет все элементы

element

(Пр. p ) Объединяет все элементы тега p.

element,element

(Пр. div,p) Объединяет все элементы div и все элементы p
.
Так же в эту группу можно выделить похожие селекторы:

element element

(Пр. div p) Выбирает все элементы p внутри div.

element>element

(Пр. div>p) Объединяет все p для которых родителем выступает div.

element+element

(Пр. div+p) Объединяет все p которые расположены сразу после div.

[attribute]

(Пр. [target]) Объединяет все элементы с атрибутом target

[attribute=value]

(Пр. [target=_blank]) Объединяет все элементы с заданным target=»_blank»

[attribute

=Apple]) Объединяет все элементы, которые в своем title содержат «Apple»

[attribute|=value]

(Пр. [class|=top]) Объединяет все элементы с атрибутом class начиння с «top»

Все теги написаны были без «<>«.

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

Так же их называют Псевдокласы:

:visited

:active

:hover

:focus

:first-letter

:first-line

:first-child

:before

:after

:lang(language)

(Пр. p:lang(it)) Довольно простой, но порой нужный элемент — для примера: Определяет стиль каждого p с атрибутом lang, значение которого начинается с «it»

Селекторы CSS3

Данные селекторы вызывают большой интерес, так как они мало кем используются и, конечно, хочется разобраться как ими пользоваться, поэтому буду приводить примеры. Также в данной группе селекторов в многострадальном IE8 и раньше DOCTYPE должен быть объявлен.

element1

ul)
Устанавливает цвет фона для всех ul элементов, которые предшествуют p с таким же родителем. Грубо говоря — на этом примере, красным будет бэкграунд только у тех «списков» которые стоят после родителя тега р.
— в этом случае ничего не произойдет, а в
а в этом случае поля Айтемов будут иметь бэк-цвет — красный.

[attribute^=value]

(Пр. a[src^=«https»]) По примеру определяет стиль каждого a для которого значение элемента src начинающегося с «https». Вот еще пример:

Проще говоря – данный селектор дает возможность установить цвет фона на всех div элементов, которые имеют значение атрибута класса, начинающихся с «тест» – а именно item3, item4.

[attribute$=value]

(Пр. a[src$=».pdf»]) Выбирает каждый тег a, для которого SRC значение атрибута заканчивается на «. PDF. И вот еще один наглядный пример:

На этом примере очень хорошо будет видно использование данного селектора, а именно в Красный цвет перекрасятся Item1 (по тому что класс заканчивается на _test) и item3.

[attribute*=value]

(Пр. a[src*=«w3schools»]) Выбирает каждый тег a, для которого значение атрибута SRC содержит подстроку «w3schools».

В этом примере результатом будут закрашенные строки item1, item3, item4.

Дальше перейдем к псевдоклассам

:first-of-type

:last-of-type

:only-of-type

:only-child

(Пр. p:only-child) Такой элемент применяется по примеру к дочернему элементу p, только если он единственный у родителя

Следующие два можно также неплохо использовать для определенной последовательности – нечетные (odd), четные(even) или число(1,2,3… или выражения 2n+1), заданные в (Х):

:nth-child(n)

, который является вторым дочерним элементом у родителя.

:nth-last-child(n)

:nth-of-type(n)

:nth-last-of-type(n)

:last-child

(Пр. p:last-child) Данный селектор задает стилевое оформление последнего элемента своего родителя.

Также стоит выделить:

:empty

:target

:enabled

:disabled

:checked

:not(selector)

(Пр. :not(p)) На примере стиль применяется ко всем элементам, которые не p. В качестве селектора могут быть псевдоклассы, теги, идентификаторы, классы и селекторы атрибутов.

Источник

CSS селекторы

Термин селектор может относиться к простому селектору (simple selector), составному селектору (compound selector), сложному селектору (complex selector) или списку селекторов.

К простым селекторам относятся:

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

Сложный селектор — это последовательность селекторов, которые разделены комбинаторами.

Список селекторов — это селекторы, перечисленные через запятую.

Комбинаторы

Для объединения простых CSS селекторов, используются комбинаторы, которые указывают взаимосвязь между простыми селекторами. Существует несколько различных комбинаторов в CSS2, и один дополнительный в CSS3, когда вы их используете, они меняют характер самого селектора.

меню

Описание CSS селекторов

Выбирает абсолютно все элементы. Например, такой код обнуляет внутренние и внешние отступы у всех элементов на странице:

* можно использовать в связке с другими селекторами. Например, выделим все дочерние элементы #container сплошной черной рамкой шириной 1px.

* создает повышенную нагрузку на скорость работы браузера, поэтому используйте его только по необходимости.

.class

У одного элемента может быть несколько классов (через пробел):

Идентификатор может быть присвоен только одному элементу на странице (если присвоить несколько, то мир не рухнет, но так делать не принято).

Следующий код устанавливает ширину и отступ элемента с идентификатором:

Селектор по ID имеет больший приоритет над селектором по классу (см. начало статьи). Поэтому по возможности используйте селекторы класса, это считается правилом хорошего тона и позволит при необходимости без лишних усилий «перебить» стили.

Селектор HTML тега. Применяться ко всем указанным элементам в документе. Часто используется для задания цвета, фона, шрифта и др.

Следующий код задает цвет текста для всех ссылок и отступы для UL списков:

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

Следующий код задает цвет текста для заголовков h2 и ссылок в теге LI:

Это правило можно сочетать с идентификаторами и классами: body.opera a < color:blue; >.

Выбирает элементы Y, которые являются дочерними к X. Выбирается только первый уровень дочерних элементов.

Добавит отступ для li первого уровня, т.е. тех который является прямым потомком элемента ul :

Это правило не коснется

.

Окрасит «текст 2» и «текст 3»:

Выбирает первый элемент Y, который находится после X (не вложен, а рядом). Стили будут применяться только к последнему элементу X.

a:link, a:visited, a:hover, a:active, a:focus

Выбирает элементы (обычно это поля формы или ссылки) в зависимости от их состояния.

Выбирает элементы, которые содержат указанный атрибут. Селектор атрибутов.

Окрасит только «текст»:

[attr = value]

Выбирает элементы, у которых есть атрибут с указанным значением. Селектор атрибутов с точным значением.

Окрасит только «текст»:

[attr *= value]

Выбирает элементы, у которых в значении указанного атрибута встречается указанная подстрока. Селектор атрибутов с плавающим значением.

Окрасит «текст» и «текст 2»:

[attr ^= value]

Выбирает элементы, у которых значение атрибута начинается с указанной строки. Селектор атрибутов со значением в начале.

Установит фоновую картинку только для «текст»:

Выбирает элементы, у которых значение атрибута заканчивается на указанную строку. Селектор атрибутов со значением в конце.

Например, выберем элементы, которые ссылаются на файлы определенного расширения.

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

Об этом селекторе не многие знают, а ведь он иногда очень удобен.

[attr |= value]

Выбирает элементы, у которых значение атрибута равно указанной строке или начинается с неё.

:target

:checked

Например, следующий код выделяет сплошной черной рамкой в 1px область возле включенного флажка:

:default

считается дефолтным ( :default ), если это элемент с атрибутом selected или первый enabled (NOT disabled) элемент по порядку DOM элементов. Для каждый selected элемент будет считаться дефолтным.

и считаются дефолтными, если они выбраны (имеют атрибут checked ).

Установим цвет фона элементов — все отключенные элементы SELECT с классом COUNTRY:

:enabled

Выбирает включенный (активный) элемент.

Элемент считается включён, когда с ним можно взаимодействовать (выбрать, кликнуть, сфокусироваться, вписать что-либо и т.д.). enabled включенными элементами считаются все не disabled элементы.

Примеры

Установим белый цвет фона для всех активных (enabled) элементов и серый для всех неактивных (disabled):

:empty

Выбирает любой пустой элемент. Пустой значит в нём не должно быть ничего (ни одной node): ни пробелов, ни текста, ни других элементов. HTML комментарии, CSS код не повлияют на то что элемент будет считать не пустой.

::before

X::before добавляет псевдо-элемент в начало X (внутрь тега). Работает вместе со свойством X::before < content:'' >, которое указывает содержание добавленного элемента. content нужно указывать даже если содержание пустое ( content:» ), т.к. элемент должен хоть что-то содержать.

Например с помощью таких стилей, можно указать значок для LI списка:

::after

X:after добавляет псевдо-элемент в конец X (внутрь тега). Работать только совместно со свойством X::after < content:'' >, которое указывает содержание добавленного элемента. content нужно указывать даже если содержание пустое ( content:» ), т.к. элемент должен хоть что-то содержать.

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

:focus

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

В этом примере при перемещении курсора в поле его фон будет изменен на желтый:

В этом примере стили применяться к любой ссылке на которую был сдела клик:

В этом примере при перемещении курсора в поле его ширина будет постепенно увеличиваться со 100 до 250 пикселей:

:focus-visible

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

:focus-within

Этот селектор полезен, например, для выделения всего контейнера

:hover

В следующем примере при наведении мышкой под ссылкой будет появляться черная линия толщиной 1px (замена свойству underline):

В следующем коде показано изменение цвета фона при наведении на элемент

:not(selector)

Следующий код выбирает для стилизации все элементы, кроме элемента p :

Выберет «элемент 1» и «элемент 2»:

::first-line, ::first-letter

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

Применит указанные стили для всех начальных букв всех абзацев в документе.

#2 Выбираем первую строку в абзаце

Применит указанные стили для всех начальных строк всех абзацев в документе.

:nth-child(n)

X:nth-child(n) выбирает каждый «n-ый» элемент Х, который находится на одном уровне с X. Считает все элементы на уровне X (неважно какой у элемента тег, т.е. любой тип, а не только тип X). Под типом подразумевается именно тег элемента (div, span, li), а не его класс или что-то еще.

Заметка: Есть такой же селектор :nth-of-type(n) разница между ними в том, что X:nth-child(n) считает все элементы на одном уровне, не важно какой тип указан в Х, а Х:nth-of-type(n) считает только элементы типа Х находящиеся на одном уровне. Например:

n = odd / even

Раскрасим четные и нечетные параграфы в разные цвета:

n = число

Установит красным цветом второй элемент:

Окрасит «Второй параграф.»:

n = выражение

Обратимся к каждому третьему элементу на текущем уровне, где расположены p:

:nth-last-child(n)

Выбирает начиная с конца. Работает точно также как и :nth-child(n) только отсчет идет не сверху, а снизу.

Следующий код установит красным цветом второй с конца параграф:

Окрасит «Второй параграф.»:

:nth-of-type(n)

Выбирает элемент по номеру указанному в «n». X:nth-of-type начинает отсчет от первого элемента типа X находящегося на одном уровне. Под типом подразумевается именно тег элемента (div, span, li), а не его класс.

Заметка: есть такой же селектор :nth-child(n) разница между ними в том, что X:nth-of-type(n) выберет только элементы типа Х находящиеся на одном уровне, а X:nth-child(n) считает все элементы всех типов на одном уровне, не важно какой тип указан в Х. Например:

#1 n = add / even

Раскрасим четные и нечетные параграфы в разные цвета. Считает именно параграфы без h1, как это делает :nth-child :

#2 n = число

Установит красным цветом второй элемент:

Окрасит «Второй параграф.»:

#3 n = выражение

Например: обратимся к каждому третьему элементу p на текущем уровне, где расположены p:

:nth-last-of-type(n)

Например: обратимся к каждому третьему элементу p с конца, на текущем уровне, где расположены p :

:first-child

X:first-child Выбирает первый элемент который находится на одном уровне с Х. Отсчет начинается с любого элемента не обязательно Х.

X:first-child это тоже самое что X:nth-child(1)

#1 Пример: обратимся к первому элементу в блоке #container

А вот так не выделит ничего:

#2 Обнуление границы

:last-child

X:last-child Выбирает первый с конца элемент который находится на одном уровне с Х. Отсчет начинается с любого элемента не обязательно X.

X:last-child это тоже самое что X:nth-last-child(1)

#1 Пример: обратимся к первому с конца элементу в блоке #container

А вот так ничего не выделит:

#2 Покрасим последний элемент li в списке ul в зеленый:

:first-of-type, :last-of-type

X:first-of-type это тоже самое что X:nth-of-type(1)

#1 Пример: обратимся к первому элементу div в блоке #container

#2 Обнуление границы

:first-of-type часто используется для обнуления свойства border на граничных элементах списка:

:only-child

X:only-child Выбирает элемент X, который единственный на уровне X. При подсчете элементов название тега X НЕ учитывается.

Другими словами: выбирает дочерние элементы X только, когда у родителя количество всех дочерних элементов (неважно какой тип) равно 1.

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

:not(:only-child)

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

В результате если у нас один элемент он НЕ будет выбран:

А если больше одного, то будут выбраны все:

:only-of-type

X:only-of-type Выбирает элемент X, который единственный на уровне X (не имеет соседей). При подсчете элементов учитывается название тега X.

Другими словами: выбирает дочерние элементы X только, когда у родителя количество всех дочерних элементов типа X равно 1.

#1 Выберем ul только с одним элементом в списке.

Немного практики

#1 Сложное выделение

У нас есть такой код:

Как обратиться к «Список 2»?

Решение 1

Код находит первый список, затем находит его прямого наследника и у которого порядковый номер в списке равен 2.

Решение 2

Использование соседних селекторов.

Браузер находит ul, следующий сразу за p, затем находит его последний дочерний элемент.

Решение 3

Это решение пожалуй самое правильное, потому что если между ul или li попадут другие теги, этот пример все равно будет выбирать нужный нам li:

Браузер выбирает первый ul (именно ul), затем находит первый с конца элемент li (именно li).

Наглядное пособие по селекторам типа :nth-child

Считаем элементы в блоке с помощью nth-child

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

Допустим, у вас есть список из 20 элементов и нужно выбрать элементы с 7 по 14 включительно. Это можно сделать вот так:

Источник