30 селекторов CSS, которые нужно запомнить


Содержание материала:

Знаете ли вы селекторы?

CSS3-селекторы – фундаментально полезная вещь.

Даже если вы почему-то (старый IE?) не пользуетесь ими в CSS, есть много фреймворков для их кросс-браузерного использования CSS3 из JavaScript.

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

Основные виды селекторов

Основных видов селекторов всего несколько:

  • * – любые элементы.
  • div – элементы с таким тегом.
  • #id – элемент с данным id .
  • .class – элементы с таким классом.
  • [name=»value»] – селекторы на атрибут (см. далее).
  • :visited – «псевдоклассы», остальные разные условия на элемент (см. далее).

Селекторы можно комбинировать, записывая последовательно, без пробела:

  • .c1.c2 – элементы одновременно с двумя классами c1 и c2
  • a#id.c1.c2:visited – элемент a с данным id , классами c1 и c2 , и псевдоклассом visited

Отношения

В CSS3 предусмотрено четыре вида отношений между элементами.

Самые известные вы наверняка знаете:

  • div p – элементы p , являющиеся потомками div .
  • div > p – только непосредственные потомки

Есть и два более редких:

p – правые соседи: все p на том же уровне вложенности, которые идут после div .

  • div + p – первый правый сосед: p на том же уровне вложенности, который идёт сразу после div (если есть).
  • CSS селекторы

    Селектор — это часть CSS-правила, которая сообщает браузеру, к какому элементу (или элементам) веб-страницы будет применён стиль.

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

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

    • селектор типа
    • универсальный селектор
    • селекторы атрибутов
    • селектор идентификатора
    • селектор класса
    • псевдо-классы
    CSS селектор Пример Описание CSS
    .class .myClass Выбирает все элементы с классом myClass ( ). 1
    #id #main Выбирает элемент с идентификатором main ( ). 1
    * * Выбор всех элементов. 2
    элемент span Выбор всех элементов . 1
    элемент,элемент div,span Выбор всех элементов

    и всех элементов .

    1
    [атрибут] [title] Выбирает все элементы с атрибутом title . 2
    [атрибут=»значение»] [title=»cost»] Выбирает все элементы с атрибутом title , значение которого в точности совпадает со значением указанным в селекторе ( title=»cost» ). 2
    [атрибут

    =»значение»]

    [title

    =»один»]

    Выбирает все элементы с атрибутом title , в значении которого (в любом месте) встречается подстрока (в виде отдельного слова) «один» ( title=»один и два» ). 2
    [атрибут|=»значение»] [lang|=»ru»] Выбор всех элементов с атрибутом lang , значение которого начинается с «ru». 2
    [атрибут^=»значение»] a[href^=»https»] Выбор каждого элемента с атрибутом href , значение которого начинается с «https». 3
    [атрибут$=»значение»] [src$=».png»] Выбирает все элементы с атрибутом src , значение которого оканчивается на «.png» ( src=»https://puzzleweb.ru/css/some_img.png» ). 3
    [атрибут*=»значение»] [title*=»один»] Выбирает все элементы с атрибутом title , в значении которого (в любом месте) встречается подстрока (в виде отдельного слова или его части) «один» ( title=»один и два» ). 3

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

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

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

    Комбинаторы

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

    Комбинатор Пример Описание CSS
    элемент элемент div span Выбор всех элементов внутри

    .

    1
    элемент>элемент div>span Выбирает все дочерние элементы , у которых родитель — элемент
    .
    2
    элемент+элемент div+p Выбирает все элементы

    , которые расположены сразу после элементов

    ol

    Выбор всех элементов

      , которым предшествует элемент

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

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

    Псевдо-класс Пример Описание CSS
    :link a:link Выбор всех не посещенных ссылок. 1
    :visited a:visited Выбор всех посещенных ссылок. 1
    :active a:active Выбор активной ссылки. 1
    :hover a:hover Выбор ссылки при наведении курсора мышки. 1
    :focus input:focus Выбор элемента , который находится в фокусе. 2
    :first-child p:first-child Выбор каждого элемента

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

    2
    :lang(язык) p:lang(ru) Выбор каждого элемента

    с атрибутом lang , значение которого начинается с «ru».

    2
    :first-of-type p:first-of-type Выбор каждого элемента

    , который является первым из элементов

    своего родительского элемента.

    3
    :last-of-type p:last-of-type Выбор каждого элемента

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

    своего родительского элемента.

    3
    :only-of-type p:only-of-type Выбор каждого элемента

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

    своего родительского элемента.

    3
    :only-child p:only-child Выбор каждого элемента

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

    3
    :nth-child(n) p:nth-child(2) Выбор каждого элемента

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

    3
    :nth-last-child(n) p:nth-last-child(2) Выбор каждого элемента

    , который является вторым дочерним элементом своего родительского элемента, считая от последнего дочернего элемента.

    3
    :nth-of-type(n) p:nth-of-type(2) Выбор каждого элемента

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

    своего родительского элемента.

    3
    :nth-last-of-type(n) p:nth-last-of-type(2) Выбор каждого элемента

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

    своего родительского элемента, считая от последнего дочернего элемента.

    3
    :last-child p:last-child Выбор каждого элемента

    , который является последним элементом своего родительского элемента.

    3
    :root :root Выбор корневого элемента в документе. 3
    :empty p:empty Выбор каждого элемента

    , который не содержит дочерних элементов (включая текст).

    3
    :target :target Выбор текущего целевого элемента на странице, то есть элемента, к которому был осуществлён переход по ссылке внутри страницы. 3
    :enabled input:enabled Выбор каждого включенного элемента . 3
    :disabled input:disabled Выбор каждого выключенного элемента . 3
    :checked input:checked Выбор элемента , выбранного по умолчанию или пользователем. 3
    :not(селектор) :not(p) Выбор всех элементов, кроме элемента

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

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

    CSS — Селекторы

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

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

    Селекторы — это один из фундаментальных механизмов CSS. Именно они определяют то, к каким элементам будут применены стили, указанные в фигурных скобках.

    Пример CSS правила:

    В этом CSS правиле, p — это селектор , в данном случае — это селектор элемента . Это CSS правило устанавливает стили (CSS свойства, описанные в нём) для всех элементов p на странице.

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

    Базовые селекторы

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

    Селектор по элементу (тегу)

    Селектор по элементу предназначен для выбора элементов по имени тега.

    Пример задания правила для всех элементов p на странице:

    Селектор по классу

    Селектор по классу предназначен для выбора элементов по классу (значению атрибута class ).

    Пример задания правила для всех элементов, имеющих класс center :

    Селектор по идентификатору (id)

    Селектор по идентификатору предназначен для выбора элемента по идентификатору (значению атрибута id ).

    Пример задания правила для элемента, имеющего в качестве значения атрибута id значение footer :

    Универсальный селектор

    Универсальный селектор (селектор звёздочка) предназначен для выбора всех элементов.

    Пример задания правила для всех элементов на странице:

    CSS селекторы по атрибуту

    Селекторы по атрибуту предназначены для выбора элементов по имени атрибута и (или) его значению.

    Типы селекторов по атрибуту:

    • [attr] – по имени атрибута;
    • [attr=value] – по имени и значению атрибута;
    • [attr^=value] – по имени и значению, с которого оно должно начинаться;
    • [attr|=value] – по имени атрибута и его значению, которое равно value или начинается со value- ;
    • [attr$=value] – по имени атрибута и значению, на которое оно должно заканчиваться;
    • [attr*=value] – по указанному атрибуту и значению, которое должно содержать value ;
    • [attr

    =value] – по имени атрибута и значению, которое содержит value отделённое от других с помощью пробела.

    Пример задания правила для всех элементов на странице, имеющих атрибут target :

    [attr=value]

    Пример задания правила для всех элементов на странице, имеющих атрибут rel со значением nofollow :

    [attr^=value]

    Пример задания правила для всех элементов на странице, имеющих атрибут class , значение которого начинается с col :

    [attr|=value]

    Пример задания правила для всех элементов на странице, имеющих атрибут class , значение которого равно test или начинается с test- (т.е. с обязательным дефисом, после которого идёт остальное содержимое значения):

    [attr$=value]

    Пример задания правила для всех элементов на странице, имеющих атрибут class , значение которого заканчивается на color :

    [attr*=value]

    Пример задания правила для всех элементов на странице, имеющих атрибут href , значение которого содержит подстроку youtu.be (например будет выбран элемент, если атрибут href у него равен https://youtu.be/TEOSuiNfUMA ):

    Пример задания правила для всех элементов на странице, имеющих атрибут data-content , значение которого содержит news , отделённое от других с помощью пробела (например будет выбран элемент, если у него атрибут data-content равен hot-news news news-football ):

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

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

    Псевдоклассы — это дополнение к основному селектору, которое позволяет выбрать элемент в зависимости от его особого состояния. Добавляется он к селектору c помощью символа : , т.е. так селектор:псевдокласс .

    Псевдоклассы для выбора элементов в зависимости от их состояния

    К этой группе псевдоклассов можно отнести псевдоклассы: :link , :visited , :hover , :active и :focus .

    Псевдоклассы :link и :visited предназначены исключительно для ссылок (элементов a с атрибутом href ).

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

    Псевдокласс :link

    Псевдокласс :link предназначен для выбора не посещённых ссылок.

    Пример задания правила для всех элементов a с классом external , которые пользователь ещё не посетил:

    Псевдокласс :visited

    Псевдокласс :visited предназначен для выбора посещённых ссылок.

    Пример задания правила для всех элементов a , расположенных в .aside , пользователь которые уже посетил:

    Псевдокласс :active

    Псевдокласс :active предназначен для выбора элементов в момент когда они активируются пользователем. Например, когда пользователь нажал левой кнопкой мышкой на ссылку, но её ещё не отпустил. В основном данный класс применяется для ссылок ( a ) и кнопок ( button ), но может также использоваться и для других элементов.

    Пример задания CSS правила для всех элементов a когда они активируются пользователем:

    Псевдокласс :hover

    Псевдокласс :hover предназначен для выбора элементов при поднесении к ним курсора (при наведении на них).

    Пример задания CSS правила для всех элементов .btn-warning при поднесении к ним курсора:

    При задании CSS-правил для ссылок с использованием псведоклассов :link , :visited , :hover и :active , их следует распологать в следеующем порядке:

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

    Псевдокласс :focus

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

    Пример задания CSS правила для элемента input[type=»text»] при нахождении его в фокусе:

    По расположению среди соседей

    При выборе элементов можно дополнительно с помощью псевдоклассов задать условие (фильтр) по их расположению (порядковому номеру) в родителе.

    Псевдоклассы, предназначенные для этого: :first-child , :last-child , :only-child , :nth-child(выражение) , :nth-last-child(выражение) .

    Псевдокласс :first-child

    Псевдокласс :first-child применяется для выбора элементов, которые являются первыми дочерними элементами своего родителя.

    Пример задания CSS правила для элементов li являющимися первыми дочерними элементами своего родителя:

    Псевдокласс :last-child

    Псевдокласс :last-child применяется для выбора элементов, которые являются последними дочерними элементами своего родителя.

    Пример задания CSS правила для элементов .alert-warning , которые являются последними дочерними элементами своего родителя:

    Псевдокласс :only-child

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

    Селектор h2:only-child выберет все элементы h2 , если они являются единственными дочерними элементами своего родителя.

    Действие аналогичное :only-child можно выполнить с помощью псевдоклассов :first-child и :last-child . Например селектор h2:only-child можно ещё реализовать так: h2:last-child:first-child .

    Псевдокласс :nth-child(выражение)

    Псевдокласс :nth-child() применяется для выбора элементов по их порядковому номеру в родителе. В качестве выражения можно использовать число, формулу или ключевые слова odd или even . Отсчёт элементов в родителе начинается с 1.

    Формула имеет следующую запись: An + B . A и B — это числа, а n — счетчик, принимающий целые значения, начиная с 0 (т.е. 0, 1, 2, 3 . ).

    Например, формула вида 3n + 2 будет определять элементы с порядковыми номерами (2, 5, 8, . ). Т.е. 3 * 0 + 2 , 3 * 1 + 2 , 3 * 2 + 2 , .

    А например, формула вида 5n будет определять элементы с порядковыми номерами (0, 5, 10, . ). Т.е. 5 * 0 , 5 * 1 , 5 * 2 , .

    Псевдокласс :nth-last-child(выражение)

    Псевдокласс :nth-last-child() выполняет те же действия что и :nth-child() за исключением того, что отсчет элементов в родителе вёдется не с начала, а с конца. В псведоклассе :nth-last-child(выражение) в качестве выражения можно использовать те же вещи, т.е. число, формулу, или ключевые слова odd или even

    По расположению среди соседей с учётом типа элемента

    В CSS имеются псевдоклассы аналогичные :first-child , :last-child и т.д. Они отличаются от них только тем, что выполняют это с учётом типа элемента.

    Список псевдоклассов, предназначенных для этого: :first-of-type , :last-of-type , :only-of-type , :nth-of-type(выражение) , :nth-last-of-type(выражение) .

    Псевдокласс :first-of-type

    Данный псевдокласс очень похож на :first-child , но в отличие от него он выбирает не просто первый элемент, а первый элемент своего родителя с учётом его типа .

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

    При использовании селектора p:first-child , не один элемент p не был выбран, т.к. не один из них не является первым дочерним элементом своего родителя.

    Псевдокласс :last-of-type

    Данный псевдокласс предназначен для выбора элементов, которые являются последними дочерними элементами данного типа своего родителя.

    Псевдокласс :only-of-type

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

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

    Псевдокласс :nth-of-type(выражение)

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

    Псевдокласс :nth-of-type(выражение) похож на :nth-child(выражение) с разницей лишь а том, что он учитывает тип элемента. В качестве выражения также можно использовать число, формулу или ключевые слова odd или even . Отсчёт элементов в родителе начинается с 1.

    Селектор p:nth-child(2) выберет второй по счёту элемент, если он является p , а селектор p:nth-of-type(2) веберет второй дочерний элемент p среди дочерних p .

    Псевдокласс :nth-last-of-type(выражение)

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

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

    К этой группе можно отнести псевдоклассы :enabled , :disabled и :checked .

    Псевдоклассы этой группы, а также :hover , :active и :focus ещё называют событийными селекторами, т.к. они позволяют применить стили при наступлении определённых событий.

    Псевдокласс :checked

    Псевдокласс :checked предназначен для выбора элементов radio , checkbox и option внутри select , которые находятся во включенном состоянии.

    В этом примере фон элемента label при отмеченном checkbox выделяется цветом. Выбор включенного чекбокса выполняется с помощью псевдокласса :checked .

    Псевдокласс :enabled

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

    Пример, в котором установим для всех включенных элементов input фон:

    Псевдокласс :disabled

    Элементы формы могут кроме включенного состояния находиться ещё в отключенном.

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

    Например, выберем все отключенные элементы input :

    Остальные псевдоклассы

    Псевдокласс :not(селектор)

    Псевдокласс :not() предназначен для выбора элементов, которые не содержат указанный селектор.

    В качестве селектора можно указывать селекторы по тегам, классам, атрибутам, использовать псевдоклассы, т.е. всё кроме псведокласса :not() , несколько сгруппированных селекторов, псевдоэлементы, дочерние и вложенные селекторы:

    При необходимости можно использовать несколько псевдоклассов :not() .

    Пример CSS селектора для выбора элементов, которые не содержат некоторый класс:

    Псевдокласс :empty

    Псевдокласс :empty предназначен для выбора пустых элементов (т.е. элементов, у которых нет дочерних узлов, в том числе текстовых).

    Селектор div:empty выберет все пустые элементы div на странице.

    Псевдокласс :root

    Псевдокласс :root предназначен для выбора корневого элемента документа. В HTML документе данным элементом является . В отличие от селектора по тегу html данный псевдокласс имеет более высокий приоритет.

    Применять :root можно например для объявления CSS переменных:

    Псевдокласс :target

    Псевдокласс :target предназначен для выбора элемента, идентификатор которого соответствует хэшу в URL-адресе.

    В этом примере стили будут применены к элементу с , если хэш URL страницы будет равен #header-1 . Если же хэш будет равен #header-2 , то псевдокласс :target соответственно выберет элемент с и стили уже будут применены к нему.

    Группировка селекторов

    Для задания правил нескольким селекторам одновременно их необходимо перечислить через запятую.

    Синтаксис: селектор1, селектор2, .

    Пример задания правила для всех элементов h3 и h4 на странице:

    Комбинирование селекторов

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

    Пример селектора для выбора элементов, которые имеют одновременно два класса:

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

    Селекторы отношений

    В HTML документе каждый элемент всегда связан с другими элементами.

    Виды отношений между HTML элементами:

    • родитель – элемент, непосредственно в котором находится рассматриваемый элемент;
    • предок – это элемент, который расположен на одном из уровней иерархии элементов, до которого можно дойти двигаясь от рассматриваемого элемента к его родителю, от его родителя к родителю его родителя и т.д.
    • дети – это элементы, непосредственно расположенные в текущем рассматриваемом элементе;
    • потомки (дочерние элементы) – это любые элементы, которые находятся в текущем элементе вне зависимости от уровня иерархии, в котором они расположены;
    • соседи (сиблинги) – это элементы, расположенные на том же уровне вложенности (иерархии), что и рассматриваемый элемент; или другими словами — это все другие элементы, которые имеют того же родителя что и текущий рассматриваемый элемент.

    Более наглядно про отношения элементов приведено на рисунке. На этом рисунке отношения рассмотрены относительно элемента выделенного синим цветом.

    В CSS имеется 4 вида селекторов отношений.

    Первые два из них X Y и X > Y относятся к вложенным селекторам. Они предназначены для поиска элементов в зависимости от их нахождения внутри других.

    Остальные два X + Y и X

    Y являются CSS селекторами для выбора соседних элементов.

    Эти селекторы называют составными или комбинацией селекторов. Так как они на самом деле состоят из нескольких селекторов, разделённых между собой с помощью специальных символов (комбинаторов). Всего различают 4 символа: пробел, знак > (больше), знак + и

    Селектор X Y (для выбора вложенных или дочерних элементов)

    Селектор X Y (предок потомки) предназначен для выбора элементов Y , находящихся в X .

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

    Селекторы X Y называют контекстными или вложенными.

    Например, селектор дочерних элементов div p выберет все элементы p , расположенные в div .

    Селектор X > Y

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

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

    Например, комбинация селекторов li > ul выберет все элементы ul , которые непосредственно расположены в li .

    Селектор X + Y

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

    Например, комбинация селекторов input + label выберет все элементы label , которые расположены сразу же за элементом input , и являющиеся друг по отношению к другу соседями (сиблингами).

    Селектор X

    Y предназначен для выбора элементов Y , которые расположены после X . При этом элементы, определяемые селектором X и Y , должны являться по отношению друг к другу соседями (сиблингами).

    span выберет все элементы span , расположенные после элемента p на том же уровне вложенности.

    Приоритет селекторов

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

    Специфичность селекторов удобно представлять в виде 4 чисел: 0,0,0,0 .

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

    Если у сравниваемых селекторов все цифры равны, то будет применяться тот, который ниже из них расположен по коду.

    Как считать эти цифры? Каждый селектор в зависимости от типа имеет вес:

    • универсальный селектор (не добавляет вес) – 0,0,0,0 ;
    • селекторы по тегу, псевдоэлемент добавляют единичку к четвёртой цифре – 0,0,0,1 ;
    • селекторы по классу и по атрибуту, псевдоклассы добавляют единичку ко третьей цифре – 0,0,1,0 ;
    • селектор по идентификатору добавляют единичку ко второй цифре – 0,1,0,0 ;

    Стили, расположенные в атрибуте style элемента, являются более специфичными по сравнению с селекторами. Вес этих стилей определяется единицей в первой цифре – 1,0,0,0 .

    • * – 0,0,0,0 ;
    • li – 0,0,0,1 ;
    • li::before – 0,0,0,2 ;
    • ul > li – 0,0,0,2 ;
    • div input+label – 0,0,0,3 ;
    • h1 + div[data-target] – 0,0,1,2 ;
    • .btn.show – 0,0,2,0 ;
    • ul li a.item – 0,0,1,3 ;
    • #aside div.show – 0,1,1,1 ;
    • style=». » – 1,0,0,0 ;

    Повысить важность определённого CSS свойства можно с помощью ключевого слова !important . В этом случае будет использоваться именно данное CSS-свойство.

    В этом примере элементу будет установлен тот фон к которому добавлено слово !important . !important перебивает любой вес.

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

    В этом случае будет применено то значение CSS-свойства c !important у которого больше вес селектора.

    К примеру, если добавить !important к CSS-свойству расположенному в style , то получим максимальную возможную специфичность, которую уже никак не перебьёшь.

    В этом примере к элементу #message будет применено CSS-свойство font-size со значением 20px, т.к. хоть у каждого из них имеется состояние !importants , но специфичность style ( 1,0,0,0 ) больше чем у селектора p#message ( 0,1,0,1 ).

    Каких селекторов нет в CSS?

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

    CSS-селекторы

    На этой странице

    Селектор определяет, к какому элементу применять то или иное CSS-правило.

    Обратите внимание — не существует селекторов, которые бы позволили выбрать родителя (содержащий контейнер) или соседа родителя или потомков соседа родителя.

    Базовые селекторы

    =value] [attr|=value] [attr^=value] [attr$=value] [attr*=value]
    Пример: селектор [autoplay] выберет все элементы, у которых есть атрибут autoplay (независимо от его значения).
    Ещё пример: a[href$=».jpg»] выберет все ссылки, у которых адрес заканчивается на «.jpg».
    Ещё пример: a[href^=»https»] выберет все ссылки, у которых адрес начинается на «https».

    Комбинаторы

    ‘ выбирает элементы, которые находятся на этом же уровне вложенности, после указанного элемента, с тем же родителем.
    Синтаксис: A

    B
    Пример: p

    внутри одного родителя. Комбинатор следующего соседнего элемента Комбинатор ‘+’ выбирает элемент, который находится непосредственно после указанного элемента, если у них общий родитель.
    Синтаксис: A + B
    Пример: селектор ul + li выберет любой используется для создания элементов списка.»> элемент, который находится непосредственно после элемента .

    Прокачиваем навыки работы с CSS селекторами

    Работа с CSS селекторами это важный момент любой части Front-end разработки. Чем лучше вы их знаете, тем больше времени вы экономите себе и своим коллегам.

    Я использую CSS много лет, но есть одна вещь, которую я детально не рассматривал этого момента — это тема CSS селекторов.

    Зачем мне это нужно? Мы уже все хорошо знаем селекторы, верно? Но проблема тут в том, что со временем можно привязаться к использованию одного и того же проверенного набора селекторов на каждом проекте, чтобы достигнуть того, что нам нужно сделать.

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

    Я также открыл несколько новых, крутых селекторов, которые будут доступны в будущем, но пока что не широко поддерживаемы.

    Я приглашаю вас присоединиться ко мне, чтобы посмотреть на различные типы CSS селекторов. Сколько из них вы уже используете в вашей ежедневной работе? Было бы интересно узнать.

    Готовы прокачаться в плане CSS селекторов? Ок, поехали.

    Комбинированные селекторы

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

    Селектор главного потомка A B

    Селектор прямого/непосредственного потомка A > B

    Смежный селектор A + B

    Родственный селектор A

    Смежный селектор A + B должен уже быть вам знаком, он выбирает элемент B, который идет сразу после A. Но что по поводу родственного селектора A

    B ? Он выбирает все родственные элементы, которые идут после A. Вот их пример:

    Строка New York выбрана, потому что она идет сразу же за первой строкой, а последние два города подсвечены красным, как основные родственные селекторы подходящие под все города после четвертого.

    Этот блог бесплатный, в нём нет рекламы и ограничений paywall.
    Вы можете его поддержать через Яндекс.Деньги. Спасибо.

    Селекторы атрибутов

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

    Этот пример демонстрирует выборку все чекбоксов в инпуте и применение стилей к их ассоциированным лейблам, сделав их жирными и синими.

    Затем мы переписываем стиль для чекбокса с именем chk2 и цвет его лейбла становится красным. Обратите внимание, как другие лейблы не подвергаются стилизации.

    Селекторы атрибутов не только вообще для форм, они могут выбирать любые атрибуты на любом элементе. И вы можете выбрать любой атрибут, а не только те которые официально поддерживаются. Более того, вы можете просто проверить наличие атрибута, как написано дальше:

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

    Первая ссылка не имеет атрибута target, так что её не выбираем. Следующие две ссылки выбираются, так как у них есть пустой атрибут target или один со значением, это не важно. И под конец, последняя ссылка становится розовой, так как выбирается из-за наличия атрибута fluffy. Её значение нерелевантно и просто должно быть само по себе, чтобы селектор a[fluffy] его выбрал.

    Практический пример этого мог бы быть в подсвечивании изображений, которые не имеют атрибута alt. Этот атрибут требуется для доступности, так что он важен в целях SEO, так что вам нужно убедиться в том, что все изображения его имеют. Мы можем использовать следующее правило, чтобы этого добиться:

    Если вы хотите выбрать конкретную группу атрибутов, то для вас есть группа очень полезных селекторов:

    A[attr^=val] Атрибуты, которые начинаются со значения val.

    A[attr|=val] Атрибуты, которые начинаются со значения val или он первый в списке, разделенном тире.

    A[attr*=val] — Значение появляется везде в атрибуте.

    =val] — Значение является одним из разделенным пробелом.

    Первые два примера очень схожи, кроме A[attr|=val] , который также выбирает значения разделенные тире. Именно это может быть полезно для выбора языковых атрибутов. Как пример

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

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

    И на последок, у нас есть A[attr

    =val] , который отлично подходит для выбора значений в атрибутах, состоящих их списка значений, разделенных пробелами. Он выбирает только целое слово, а не фрагмент, как *= оператор, так что много множества слов выбраны не будут.

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

    Большинство основных браузеров поддерживает выборку чувствительную к регистру, кроме Internet Explorer и Microsoft Edge.


    Селекторы пользовательского интерфейса

    Если вы работали над стилизацией форм, то вы без сомнений встречали эти типы псевдо-классов:

    Для примера, мы можем использовать :checked для стилизации простого to-do списка.

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

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

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

    :optional (не обязательно)

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

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

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

    Завершая эту секцию, давайте взглянем на :ready-only , :read-write и :placeholder-shown псевдо-классы.

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

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

    Структурные селекторы

    Это очень мощные селекторы и они могут выделять элементы, основываясь на их позиции в DOM . Они дают вам гибкости в выборе элементов на чистом CSS, что могло бы с другой стороны потребовать работы с JavaScript.

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

    Для примера :nth-child() получает значение, которое будет соответствовать конкретному дочернему элементу, относительно его родительского контейнера.

    И так, если бы у нас был бы список элементов, то следующий селектор выбрал бы третий по списку.

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

    ul:nth-child(2) — Выберет второй дочерний элемент

    ul:nth-child(4n) — Выберет каждый четвертый дочерний элемент (4, 8, 12, …)

    ul:nth-child(2n + 1) — Выберет каждый второй дочерний элемент, начиная с первого (1, 3, 5, …)

    ul:nth-child(3n — 1) — Выберет каждый третий дочерний элемент, начиная с минус первого (2, 5, 8, …)

    ul:nth-child(odd) — Выберет нечетные элементы (1, 3, 5, …)

    ul:nth-child(even) — Выберет четные элементы (2, 4, 6, …)

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

    Вы можете использовать простые выражения со следующими структурными селекторами:

    :nth-last-child() и :nth-last-of-type() очень схожи с : nth-child() и :nth-of-type() , кроме того, что они выбирают последний элемент, а не первый.

    Вы можете покреативить с селекторами, играясь с различными комбинациями. Для примера, предидущий пример Pen содержал селектор:

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

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

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

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

    Селекторы контента

    Эта секция о специальном наборе селекторов для выбора контента. Для нас доступны следующие из них:

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

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

    Вот список контент селекторов, за которыми стоит следить:

    ::inactive-selection — Выбирает контент внутри негативного окна.

    ::spelling-error — Проверяет грамматику и правописание для редактируемых элементов.

    ::grammar-error — Выбирает грамматические ошибки.

    ::marker — Выбирает маркеры списков.

    ::placeholder — Выбирает текст плейсхолдеров элементов формы.

    Разнообразные селекторы

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

    :target выбирает элемент с id , который соответствует части данного URL. Так что если бы у нас был элемент с id part1 и ссылка:

    Мы бы могли выбрать этот элемент:

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

    То он может быть упрощен с :matches() и эквивалентен:

    Отлично, это поможет сделать таблицы стилей более читаемыми. Далее у нас есть :any-link , очень удобный селектор и делает тоже самое, что и :link и :visited вместе.

    Так что эти два селектора были бы фактически тем же самым:

    И мы подходим к последним селекторам в этой статье:

    Оба они относятся к языку сайта.

    :dir() берёт параметр ltr или rtl , в зависимости от направления текста, который вы хотите выбрать и сейчас поддерживается Firefox.

    Так что :dir(rtl) выбрал бы все элементы с контентом в направлении справа на лево.

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

    Один и тот же простой текст введен в три дива, но с указанием страны, добавленным в конец контента. Также, коды стран используются атрибуте Lang представляя соответствующую страну.

    en — Английский язык

    el — Греческий язык

    is — Исландский язык

    Дивы могут быть выбраны по :lang селектору:

    И хорошие новости в том, что :lang селектор уже поддерживается всеми главными браузерами.

    И под конец

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

    Есть много крутых вещей, которые вы можете сделать с чистым CSS, что не было возможным хотя бы несколько лет назад.

    Это очень интересно для дизайнеров, которые могут красивую продвинутую стилизацию и анимацию на чистом CSS и всё это без единой строчки кода на JavaScript.

    Селекторы. Виды селекторов.

    Селекторы — это часть правила CSS, которые позволяют определить к какому элементу веб страницы следует применять правила. Они могут быть: простыми, сложными, составными (список селекторов).

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

    • классы;
    • селектор тега;
    • идентификаторы;
    • универсальный селектор.
    Простые селекторы

    Классы задаются элементам с помощью атрибута >

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

    Все классы на CSS записываются в следующем виде:

    width: 50%;

    color: green;

    Теперь после того как мы присвоим элементу класс со значением контент, он будет иметь ширину 50% и цвет текста зеленый.

    Как мы и говорили ранее классы можно назначать многим элементам веб-страницы. То есть, если у вас на одной странице будет несколько элементов с одним классом, то ошибкой это не будет.

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

    color: green;

    В данном случае ко всем тегам

    будет применен стиль написанный выше. При таком написание правил не нужно добавлять дополнительные атрибуты. Правила применяются ко всем тегам имеющим заданное название.

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

    Идентификаторы в отличии от классов могут применяться только к одному объекту веб страницы. Присутствие на странице двух объектов с одним идентификатором не допустимо. Это вызовет ошибку компиляции кода. Присваивается идентификатор тегу с помощью атрибута id.

    В коде CSS идентификаторы описываются следующим образом:

    color: red;

    Идентификаторы используются довольно редко для описания стилей. В основном атрибут id для тега предназначен для работы со скриптами. Особенно активно используется в JavaScript.

    Составные селекторы

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

    Код CSS выглядит следующим образом:

    color: red;

    color: green;

    width: 100%;

    В данном случае у нас есть два разных элемента с разными классами. Каждый класс содержит определенный стиль оформления. Это цвет текста в основном блоке цвет красный, в подвале зеленый. появилась необходимость сделать эти элементы шириной 100%. Можно дописать еще по строчке к каждому классу, но как уже сказали, это увеличит объем работы и вес файла CSS. В нашем случае код очень маленький поэтому эта разница не особо заметна. Но представьте что у вас есть 1000 элементов, сотни классов и идентификаторов, 2000 строк кода. И вам потребовалось некоторые элементы изменить, например убрать или добавить отступ. Таких элементов может быть 20, 30 и больше. И тогда вам придется добавить не 2 строки а 20 или 30 строк. Кроме этого вам нужно найти все места где описаны нужные селекторы а это занимает время. В этом случае составные селекторы очень облегчают задачу верстальщику и сокращают время загрузки страницы.

    Есть и еще вид составных селекторов. Например, необходимо добавить стиль оформления для определенных тегов содержащих определенный класс. Как говорили ранее, классы могут примененеы ко многим элементам веб страницы.

    margin-top: 5 px;

    Данный стиль оформления будет применен к тегам div с классом content.

    Сложные селекторы

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

    color: green;

    Данный код CSS будет применен ко всем тегам

    которые находятся внутри тега

    Это селектор вложенности. Вложенность может быть применена не только к селекторам тегов. Так же она работает и с классами, идентификаторами и тп.

    div.content p.blok <

    width: 30 px;

    В данном примере стиль будет применен для тега

    которому присвоен класс blok, который в свою очередь находится в теге

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

    color: yellow;

    Данный стиль будет применяться к тегам

    которые находятся только в теге

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

    width: 30px;

    Стиль будет применен к тегу

    идущему после тега

    Это вся информация необходимая для начала изучения CSS. Стили могут применяться в различных вариантах. Количество настроек стилей очень разнообразно. Большинство описанных приемов и способов написания селекторов служит для облегчения работы верстальщику и оптимизации кода CSS. Оптимизированный код CSS очень сильно влияет на работу сайта. Стили CSS загружаются полность вместе с сайтом. Это означает что при большом весе и размере CSS файла загрузка всего сайта будет увеличена. Если сайт долго загружается это негативно сказывается на всем. На поведении пользователей, позиции в поиске и тп.

    Селекторы в CSS

    В этой статье я постараюсь понятно объяснить что такое CSS селекторы и как использовать каждый из них. Здесь описаны все селекторы, которые нужно знать при работе с CSS.

    Что такое CSS селекторы и каскадность?

    CSS селектор — это часть правила, с помощью которого можно выбирать элемент в HTML/XHTML/XML документе. Выбранный элемент можно оформить с помощью различных свойств (стилей) CSS.

    Для начала обусловимся:

    Под словом «селектор» подразумевается один CSS селектор: div , #content , :hover ;

  • Под словом «CSS правило» (далее просто «правило») подразумевается комбинация селекторов: #content .text p .
  • Приоритеты и каскадность

    Прежде чем разбирать селекторы, важно знать главный принцип CSS — каскадность (Cascading Style Sheets — каскадные таблицы стилей). Каскадность — это приоритет одних правил (стилей) над другими.

    При вычислении приоритета в браузере, каждый селектор получает баллы, затем баллы складываются. Так css-правило получает «вес». В итоге, элемент получит стили самого «весомого» правила.

    внутри элемента .text получит стиль color:red; , а не color:blue; , потому что приоритет выше (111, а не 11).

    Если несколько css-правил с одинаковым весом влияют на один элемент, то элемент получит стили правила, которое ближе к концу HTML страницы (ниже в коде).

    Какой селектор какие баллы получает:

    Тип селектора Описание селектора Баллы
    \* универсальный селектор
    div тег 1
    :first-letter псевдо-элемент 1
    [атрибут=»значение»] селектор атрибута 10
    .text класс 10
    :hover псевдо-класс 10
    #content селектор по id 100
    style=»color:red;» атрибут style 1000
    !important добавка к значению 10000

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

    Приоритеты при медиа запросах

    Медиа запросы, например: @media ( max-width:500px ) < >не участвуют в подсчете приоритета и всегда должны располагаться ниже всех остальных правил, чтобы перебивать предыдущие, когда срабатывает указанное медиа условие.

    Неправильно: потому что так медиа запрос всегда имеет меньший приоритет и вообще не будет работать:

    Все селекторы CSS (коротко)

    Такие селекторы указываются в HTML документе (их можно увидеть в исходном коде страницы).

    Селектор Пример Описание
    * * Все элементы. Кроме псевдо-элементов.
    .class .myclass Элемент с .
    #id #main Элемент с .
    HTML тег span Элемент .
    [атрибут] [title] Элементы с атрибутом title .
    [атрибут = значение] [title=»cost»] Элементы с атрибутом title=»cost» .
    [атрибут

    = значение]

    [title

    =»cost»]

    Элементы с атрибутом title , в значение которого есть cost окруженное или нет пробелом ‘ «’: cost , cost foo , foo cost«
    [атрибут ^= значение] [src^=»http»] Элементы с атрибутом src , значение которого начинается с http .
    [атрибут $= значение] [src$=».png»] Элементы с атрибутом src , значение которого заканчивается на .png .
    [атрибут *= значение] [src*=»kama»] Элементы с атрибутом src , в значении которого присутствует ‘ kama ‘.

    есть еще селектор: [атрибут |= значение] . Пример: [lang |= ru] — элементы с атрибутом lang, значение которого равно ru или начинается с ru-, например «ru-RU». Но он практически не используется и его заменяет комбинация: [lang = ru], [lang ^= ru-] .

    Не указывается в разметке HTML-документа. Иногда динамичны — срабатывают при определенном условии (наведение курсора на элемент). Начинаются с двоеточия ‘ : ‘.

    Псевдо-класс Пример Описание
    :link a:link Выбор всех не посещенных ссылок.
    :visited a:visited Выбор всех посещенных ссылок.
    :active a:active Выбор активной ссылки.
    :hover a:hover Выбор ссылки при наведении курсора мышки. Вместо « может быть любой элемент
    По расположению на одном уровне
    :first-child *:first-child Любой первый элемент в блоке.
    :last-child *:last-child Любой последний элемент в блоке.
    :only-child *:only-child Любой элемент в блоке, если там всего один элемент.
    :nth-child(n)
    *:nth-child(2) Любой второй элемент в блоке.
    *:nth-child(2n) Любые элементы в блоке по счету: 2, 4, 6, … (чётные).
    *:nth-child(even) Любые элементы в блоке по счету: 2, 4, 6, … (чётные).
    *:nth-child(2n+1) Любые элементы в блоке по счету: 1, 3, 5, … (нечётные).
    *:nth-child(odd) Любые элементы в блоке по счету: 1, 3, 5, … (нечётные).
    *:nth-child(3n+2) Элементы номер 2, 5, 8 и так далее.
    Наглядно Посмотреть как это работает →
    :nth-last-child(n) *:nth-last-child(2) Любой второй элемент в блоке с конца.
    По расположению на одном уровне с тем же тегом
    :first-of-type p:first-of-type Выбор первого дочернего элемента

    .

    :last-of-type p:last-of-type Выбор последнего дочернего элемента

    .

    :only-of-type p:only-of-type Выбор дочернего элемента

    , если у родителя элемент

    всего один.

    :nth-of-type(n) p:nth-of-type(2) Выбор второго дочернего элемента

    .

    :nth-last-of-type(n) p:nth-last-of-type(2) Выбор второго дочернего элемента

    с конца.

    Поля форм
    :enabled input:enabled Выбор включенного . Обычно «:enabled« просто не пишется.
    :disabled input:disabled Выбор выключенного .
    :focus input:focus Выбор , который находится в фокусе (в который установлен курсор).
    :checked input:checked Выбранный элемент типа radio или checkbox.
    Остальные
    :root :root Выбор корневого элемента в документе.
    :empty p:empty Пустой элемент

    , в котором нет ни текста ни элементов.

    :lang(язык) p:lang(ru) Выбор элемента

    с атрибутом lang, значение которого начинается с «ru».

    :target :target Выбор активного элемента на странице, который имеет якорную ссылку.
    :not(селектор) :not(p) Выбор всех элементов, кроме

    .

    • Актуальную поддержку браузеров для CSS3 селекторов смотрите по этой ссылке.

    меню

    Элементы, которых реально не существуют в HTML документе. Начинаются с двойного двоеточия :: , но можно и с одинарного : .

    Псевдо-элемент Пример Описание Подд. / CSS
    ::first-letter p::first-letter Выбирает первую букву элемента

    .

    100% / 1
    ::first-line p::first-line Выбирает первую строку элемента

    .

    100% / 1
    ::before p::before Вставляет указанное в content:» содержимое в начало

    .

    100% / 2
    ::after p::after Вставляет указанное в content:» содержимое в конец

    .

    100% / 2
    ::selection p::selection Оформит выделенный (мышкой) текст внутри

    . Для firefox нужен префикс moz ( p::-moz-selection )

    71.41% / 3

    меню

    Для объединения селекторов, используются символы комбинаторы: , > , + ,

    , , . Они устанавливают взаимосвязь между селекторами.

    Комбинатор Пример Описание Подд. / CSS
    правило, правило div a, span i Элемент внутри

    и элемент внутри .

    100% / 1
    селекторСелектор .c1.c2 Элементы одновременно с двумя классами c1 и c2 . 100% / 1
    селектор селектор div span Элемент внутри
    .
    100% / 1
    селектор > селектор div > span Элементы , у которых родитель
    .
    100% / 2
    селектор + селектор div + p Один элемент

    , который находится сразу после

    p

    Все элементы

    , которые находятся сразу после

    Все селекторы CSS (подробно)

    Выбирает абсолютно все элементы на странице: «a, ul, li, div и т.д. Можно использовать для сброса стилей всех элементов. Например, такой код обнуляет внутренние и внешние отступы у всех элементов:

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

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

    Выбирает элемент у которого есть атрибут class с указанным значением: .

    Название класса, может состоять из латинских букв (a-zA-Z), цифр (0-9), символа дефиса и подчеркивания (- _).

    Следующий код устанавливает красный цвет текста для всех элементов с классом error —

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

    Выбирает элемент у которого есть атрибут id с указанным значением: .

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

    Идентификатор должен состоять из латинских букв (a-zA-Z), цифр (0-9), символа дефиса или подчеркивания: — _ . Начинается он только с буквы!

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

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

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

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

    CSS-правило, выбирает элемент Y, который является дочерним элемента X. Может состоять из нескольких селекторов (X Y Z). Сначала обязательно указывается родитель, а после него дочерние элементы. Их количество может быть любым. Свойства стиле будут применены только к последнему элементу.

    Например, следующий код выбирает любой элемент , являющийся потомком элемента

  • : (
  • текст ):

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

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

    Селекторы псевдоклассов. Задает стиль ссылкам на странице документа в зависимости от их состояния. Псевдокласс :link – устанавливает цвет текста непосещенной ссылке, а псевдокласс :visited – стилизует уже посещенную ссылку. При наведении мыши (под курсором) — a:hover , и в момент нажатия — a:active .

    Все непосещенные ссылки будут красные, а посещенные фиолетовые, а при наведении станут зеленые, а при нажатии на ссылку голубые.

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

    Например, следующий код устанавливает красный цвет текста в абзаце p, который расположен сразу после div :

    Выбирает все элементы Y, которые расположены после X на одном уровне. По поведению похож на X + Y. Разница в том, что будут выбраны все следующие элементы, а не только первый.

    Например, в указанном коде будут выбраны все элементы p , которые расположены после div :

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

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

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

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

      .

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

    Например, следующий код меняет цвет ссылки при наличии в элементе a атрибута title :

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

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

    Например, следующий код меняет цвета ссылки на сайт «site.ru»:

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

    Селектор атрибутов с плавающим значением. В следующем примере, символ «*» говорит селектору о том, что нужное значение может быть в любом месте атрибута href у тега a :

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

    Для уточнения выбора можно использовать указатели » ^ » (в начале строки), » & » (в конце строки) или «

    » (точное значение через пробел). См. ниже.

    Это другое применение селектора атрибутов со плавающим значением (см. выше).

    Допустим ситуация: необходимо стилизовать все ссылки на изображения. Можно писать несколько правил, занимающих много места, например:

    А можно все это сократить до одного правила, но для этого у каждого элемента должен быть один и тот же атрибут: data-filetype=»image» . Например все ссылки в HTML имею этот атрибут:

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

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

    Следующий код показывает, как выбрать элементы а , ссылки в которых начинаются на « http »:

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

    Рекомендуется не добавлять к параметру вышеуказанного поиска дополнительных символом, так как искомая ссылка может начинаться с «https».

    Селектор атрибутов со значением в конце. «$» — означает конец строки.

    Например, выделим элементы, которые ссылаются на файлы определенного расширения. Следующий код выберет ссылки a , ссылающиеся на изображения формата .jpg :

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

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

    Выбирает элемент у которого в значении атрибута foo есть bar . Он чем-то похож на *= , но если *= ищет указанную строку bar в любом месте значения атрибута, то

    = ищет указанную строку bar которая разделена пробелом. Т.е. bar может быть в начале, середине или конце, где бы он ни был он должен быть разделен пробелом от соседнего значения.

    Например такой css код:

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

    Селектор псевдоклассов. Выделяет активный якорь в HTML. Допустим у нас ссылка ссылается на внутренний якорь на странице, тогда при клике по этой ссылке этот селектор выделить элемент имеющий атрибут .

    Селектор псевдоклассов. Стилизует включенные radio или checkbox. Обычно применяется для выделения текста. Может использоваться с input или option или просто без них: input:checked , option:checked или :checked .

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

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

    Когда-то все браузеры реализовали эти псевдоэлементы с одним двоеточием: :after/:before.
    Стандарт с тех пор изменился и сейчас все, кроме IE8, понимают также современную запись с двумя двоеточиями. А для IE8 нужно по-прежнему одно.

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

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

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

    Селектор псевдокласса. Срабатывает только при наведении мышки на элемент, когда курсор над элементом. Может применяться для любых элементов ( div, span ) не только ссылок .

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

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

    Селектор псевдокласса. Выбирает элементы, которые не содержат указанного селектора. Вместо «selector» может быть любой селектор, кроме псевдоэлементов ( :first-letter ). Двойное отрицание запрещено — :not(:not(. )) .

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

    А в этом примере выбираются все элементы li , у которых нет класса .last :

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

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

    С CSS 2.1, для различия, принято псевдоэлементы помечать двойным двоеточием «::», а псевдоклассы одинарным «:».

    Эти селекторы можно записывать с одним двоеточием :first-line , но двойное ::first-line предпочтительнее.

    В следующих примерах показано, как использовать указанные псевдоэлементы:

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

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

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

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

    Выбирает каждый «n-ый» элемент Х, который находится на одном уровне с X. Считает все элементы на уровне X, т.е. любой тип, а не только тип X.

    Под типом подразумевается именно тег элемента (div, span, li), а не его класс или что-то еще.

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

    • odd (нечетные),
    • even (четные),
    • число (порядковый номер с 1)
    • и выражение (an+b, a и b целые числа, n — счетчик от 0).
    • смотреть на примере >

    n — odd или even

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

    n — число

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

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

    n — выражение

    Формула выражения: an + b , где «a» — число, которое будет умножаться на n, «n» — счетчик от 0-999, «b» — число, отступ.

    в селекторе :nth-child(2) указана только «а».

    :nth-child(odd) можно заменить на :nth-child(2n+1) — 1, 3, 5, 7 .

    :nth-child(even) можно заменить на :nth-child(2n) — 2, 4, 6, 8 .

    :nth-child(3n+4) — 4, 7, 10, 13 .

  • :first-child можно заменить на :nth-child(0n+1) или :nth-child(1)
  • Например: обратимся к каждому третьему элементу на текущем уровне, где расположены p:

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

    Также вместо n может быть:

    • odd — нечетные
    • even — четные
    • число — порядковый номер с 1
    • выражение an+b , где a и b целые числа, n — счетчик от 0 до 999).

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

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

    Еще примеры смотрите в предыдущем селекторе :nth-child(n) .

    Выбирает элемент по номеру указанному в «n». Начинает отсчет от первого элемента типа X находящегося на одном уровне.

    Под типом подразумевается именно тег элемента (div, span, li), а не его класс.

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

    • odd — нечетные
    • even — четные
    • число — порядковый номер с 1
    • выражение an+b , где a и b целые числа, n — счетчик от 0 до 9999.

    #1 n — add или even

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

    #2 n — число

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

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

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


    Формула выражения: an + b , где «a» — число, которое будет умножаться на n, «n» — счетчик от 0-999, «b» — число, отступ.

    в селекторе :nth-of-type(2) указана только «а».

    :nth-of-type(odd) можно заменить на :nth-of-type(2n+1) — 2, 4, 6, 8 .

    :nth-of-type(even) можно заменить на :nth-of-type(2n) — 1, 3, 5, 7 .

    :nth-of-type(3n+4) — 4, 7, 10, 13 .

  • :first-of-type можно заменить на :nth-of-type(0n+1) или просто :nth-of-type(1)
  • Например: обратимся к каждому третьему элементу p на текущем уровне, где расположены p:

    Селектор псевдокласса. Выбирает элемент по номеру указанному в «n». Начинает отсчет от последнего элемента X находящегося на одном уровне.

    Это такой же селектор как и предыдущий :nth-of-type(n) только считает наоборот, с конца.

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

    Еще примеры смотрите в предыдущем селекторе :nth-of-type(n) .

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

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

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

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

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

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

    Такой код обнулит значение верхней границы элемента li, являющимся дочерним по отношению к элементу ul.

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

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

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

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

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

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

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

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

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

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

    X:only-child (если один элемент в блоке)

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

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

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

    X:not(:only-child) (если больше чем один элемент в блоке)

    Чтобы выбрать все элементы блока, только в том случае, если в этом блоке всего больше чем один элемент, используем :only-child с отрицанием :not() :

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

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

    X:only-of-type (если один элемент типа X в блоке)

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

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

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

    Другой вариант: можно ul > li:only-child , потому что обычно в списках ul находятся только li теги.

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

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

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

    Решение 1

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

    Решение 2

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

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

    Решение 3

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

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

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

    Чтобы быстро и точно понять как работают псевдо-селекторы типа :first-child . Я создал спец. страницу. Там же можно подобрать нужный для себя селектор этого типа, под конкретную задачу.

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

    Полезная статья на Хабре — количественные CSS селекторы, учит считать элементы с помощью nth-child . Например, нужно выделить первый элемент, только, если в блоке 6 элементов указанного типа. Или, нужно выделить все элементы блока, если в блоке всего 6 элементов.

    Диапазон элементов в селекторе

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

    Селекторы. Виды селекторов.

    Селекторы — это часть правила CSS, которые позволяют определить к какому элементу веб страницы следует применять правила. Они могут быть: простыми, сложными, составными (список селекторов).

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

    • классы;
    • селектор тега;
    • идентификаторы;
    • универсальный селектор.
    Простые селекторы

    Классы задаются элементам с помощью атрибута >

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

    Все классы на CSS записываются в следующем виде:

    width: 50%;

    color: green;

    Теперь после того как мы присвоим элементу класс со значением контент, он будет иметь ширину 50% и цвет текста зеленый.

    Как мы и говорили ранее классы можно назначать многим элементам веб-страницы. То есть, если у вас на одной странице будет несколько элементов с одним классом, то ошибкой это не будет.

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

    color: green;

    В данном случае ко всем тегам

    будет применен стиль написанный выше. При таком написание правил не нужно добавлять дополнительные атрибуты. Правила применяются ко всем тегам имеющим заданное название.

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

    Идентификаторы в отличии от классов могут применяться только к одному объекту веб страницы. Присутствие на странице двух объектов с одним идентификатором не допустимо. Это вызовет ошибку компиляции кода. Присваивается идентификатор тегу с помощью атрибута id.

    В коде CSS идентификаторы описываются следующим образом:

    color: red;

    Идентификаторы используются довольно редко для описания стилей. В основном атрибут id для тега предназначен для работы со скриптами. Особенно активно используется в JavaScript.

    Составные селекторы

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

    Код CSS выглядит следующим образом:

    color: red;

    color: green;

    width: 100%;

    В данном случае у нас есть два разных элемента с разными классами. Каждый класс содержит определенный стиль оформления. Это цвет текста в основном блоке цвет красный, в подвале зеленый. появилась необходимость сделать эти элементы шириной 100%. Можно дописать еще по строчке к каждому классу, но как уже сказали, это увеличит объем работы и вес файла CSS. В нашем случае код очень маленький поэтому эта разница не особо заметна. Но представьте что у вас есть 1000 элементов, сотни классов и идентификаторов, 2000 строк кода. И вам потребовалось некоторые элементы изменить, например убрать или добавить отступ. Таких элементов может быть 20, 30 и больше. И тогда вам придется добавить не 2 строки а 20 или 30 строк. Кроме этого вам нужно найти все места где описаны нужные селекторы а это занимает время. В этом случае составные селекторы очень облегчают задачу верстальщику и сокращают время загрузки страницы.

    Есть и еще вид составных селекторов. Например, необходимо добавить стиль оформления для определенных тегов содержащих определенный класс. Как говорили ранее, классы могут примененеы ко многим элементам веб страницы.

    margin-top: 5 px;

    Данный стиль оформления будет применен к тегам div с классом content.

    Сложные селекторы

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

    color: green;

    Данный код CSS будет применен ко всем тегам

    которые находятся внутри тега

    Это селектор вложенности. Вложенность может быть применена не только к селекторам тегов. Так же она работает и с классами, идентификаторами и тп.

    div.content p.blok <

    width: 30 px;

    В данном примере стиль будет применен для тега

    которому присвоен класс blok, который в свою очередь находится в теге

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

    color: yellow;

    Данный стиль будет применяться к тегам

    которые находятся только в теге

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

    width: 30px;

    Стиль будет применен к тегу

    идущему после тега

    Это вся информация необходимая для начала изучения CSS. Стили могут применяться в различных вариантах. Количество настроек стилей очень разнообразно. Большинство описанных приемов и способов написания селекторов служит для облегчения работы верстальщику и оптимизации кода CSS. Оптимизированный код CSS очень сильно влияет на работу сайта. Стили CSS загружаются полность вместе с сайтом. Это означает что при большом весе и размере CSS файла загрузка всего сайта будет увеличена. Если сайт долго загружается это негативно сказывается на всем. На поведении пользователей, позиции в поиске и тп.

    31 CSS селектор — это будет полезно знать!

    Вы умеете выбирать нужны элементы через id, class, по типу элемента.. Но мало кто знает, что возможности CSS-селекторов гораздо шире, чем принято считать.
    Я покажу расширенные возможности селекторов CSS, включая CSS3, которые работают только в самых новых браузерах.

    выбор всех элементов

    выбраны будут абсолютно все элементы страницы

    выбраны будут все элементы внутри #content

    Работает в

    * IE6+
    * Firefox
    * Chrome
    * Safari
    * Opera

    выбирает элементы, обладающие id. На одной странице не может быть 2х одинаковых Id

    Работает в

    * IE6+
    * Firefox
    * Chrome
    * Safari
    * Opera

    выбирает элементы, обладающие class. На одной странице может быть несколько элементов с одинаковым class’ом

    Работает в

    * IE6+
    * Firefox
    * Chrome
    * Safari
    * Opera

    выбирает определённый тип элемента

    Работает в

    * IE6+
    * Firefox
    * Chrome
    * Safari
    * Opera

    5) X Y

    выбирает определённый тип элемента(Y), опираясь ещё и на его родительский элемент(ы) (X)

    Работает в

    * IE6+
    * Firefox
    * Chrome
    * Safari
    * Opera

    6) X:visited и X:link

    X:link — используем этот псевдо-класс для выделения тех элементов, на которые мы ещё не кликнули
    X:visited — выбирает те элементы, на которые клик уже совершён

    Работает в

    * IE7+
    * Firefox
    * Chrome
    * Safari
    * Opera

    выбирает элемент Y только если он идёт сразу после X

    на этом примере будут выбраны все первые параграфы, которые следуют после списков ul

    Работает в

    * IE7+
    * Firefox
    * Chrome
    * Safari
    * Opera

    8) X > Y

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

    На этом примере выбран будет ul #main, т.к. он является первым дочерним элементом. Если бы его не было, выбран был бы ul #second

    Работает в

    * IE7+
    * Firefox
    * Chrome
    * Safari
    * Opera

    похоже на X+Y, но менее строгий. Выделиться не только первая строка, следующая за ul, но и все последующие

    Работает в

    * IE7+
    * Firefox
    * Chrome
    * Safari
    * Opera

    10) X[title]

    обращается к атрибутам селектора, на нашем примере это title. Если он есть, то ссылка перекрасится.

    Работает в

    * IE7+
    * Firefox
    * Chrome
    * Safari
    * Opera

    11) X[href=»foo»]

    выделяються только те ссылки, адрес которых — указанная в квадратных скобках ссылка

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

    Работает в

    * IE7+
    * Firefox
    * Chrome
    * Safari
    * Opera

    12) X[href*=»naikom»]

    выделяются только те ссылки, адрес которых содержит в себе cочетание букв naikom — naikom.ru, naikom.ru/blog, naikom.ru/pics.

    Работает в

    * IE7+
    * Firefox
    * Chrome
    * Safari
    * Opera

    13) X[href^=»http»]

    выделяться те ссылки, которые начинаются на http.

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

    Работает в

    14) X[href$=».jpg»]

    выделяться те ссылки, которые заканчиваются на.jpg.

    Работает в

    * IE7+
    * Firefox
    * Chrome
    * Safari
    * Opera

    15) X[data-*=»foo»]

    Как нам выбрать сразу jpg, gif и png. Мы можем прописать кучу стилей..

    Но это не всегда правильно и экономично. Можно сделать лучше. Мы добавим атрибут data-filetype прямо в ссылки.

    Теперь, прописав такие строки,

    мы выделим только эти элементы.

    Работает в

    * IE7+
    * Firefox
    * Chrome
    * Safari
    * Opera

    16) X[word

    позволяет пробелами имена атрибутов. Чтобы было понятно, приведу пример:

    То есть мы можем комбинировать различные стили, и использовать их по-отдельности, используя тильду

    Работает в

    * IE7+
    * Firefox
    * Chrome
    * Safari
    * Opera

    17) input[type=radio]

    специально для input’ов есть возможность выбирать их определённый тип:

    Работает в

    * IE7+
    * Firefox
    * Chrome
    * Safari
    * Opera

    18) X:checked

    выбиаем элементы, у которых еcть атрибут checked — это могут быть radio-кнопки или checkbox.

    Работает в

    * IE9+
    * Firefox
    * Chrome
    * Safari
    * Opera

    19) X:after

    Этот посевдокласс позвоняет создать контент вокруг выбранного блока X

    на этом примере после блока с классом.clearfix создаётся пустая строка, а затем очищает её.
    Хороший трюк, когда не работает overflow: hidden

    Работает в

    * IE8+
    * Firefox
    * Chrome
    * Safari
    * Opera

    20) X:hover

    выделение происходит при наведении на блок мышкой

    Работает в

    * IE6+
    * Firefox
    * Chrome
    * Safari
    * Opera

    21) X:not(selector)

    запрещает выделение селектора в скобках

    вылеятся все элементы документа, кроме p.

    Работает в

    * IE9+
    * Firefox
    * Chrome
    * Safari
    * Opera

    22) X::pseudoElement

    мы можем выбирать и псевдо-элементы, используя для этого ::

    Выделяем первую строку параграфа:

    Выделяем первую букву строки:

    Работает в

    * IE6+
    * Firefox
    * Chrome
    * Safari
    * Opera

    23) X:nth-child(n)

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

    Работает в

    * IE9+
    * Firefox 3.5+
    * Chrome
    * Safari

    24) X:nth-last-child(n)

    то же, что и X:nth-child(n), но отбо начинается с конца. Очень удобно для больших списков. Куда проще написать, например, nth-last-child(2), чем li:nth-child(397).

    Работает в

    * IE9+
    * Firefox 3.5+
    * Chrome
    * Safari
    * Opera

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

    вместо того, чтобы выбирать child-элементы, мы можем выбрать элементы определённого type.

    Работает в

    * IE9+
    * Firefox 3.5+
    * Chrome
    * Safari

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

    да-да, то же, что и X:nth-of-type(n), но поиск пойдет с конца элемента.

    Работает в

    * IE9+
    * Firefox 3.5+
    * Chrome
    * Safari
    * Opera

    27) X:first-child

    обращается к первому дочернему элементу, например

    удаляет верхний бордер у верхнего элементу списка.

    Работает в

    * IE7+
    * Firefox
    * Chrome
    * Safari
    * Opera

    28) X:last-child

    обращается к последнему дочернему элементу, например

    удаляет нижний бордер у нижнего элемента списка.

    Работает в

    * IE9+
    * Firefox
    * Chrome
    * Safari
    * Opera

    29) X:only-child

    Выделит только те элементы, которые являются ЕДИНСТВЕННЫМИ дочерними.

    Например, возьмём код:

    В нём выберется только Параграф1.

    Работает в

    * IE9+
    * Firefox
    * Chrome
    * Safari
    * Opera

    30) X:only-of-type

    Выбирает элементы, которые не имеют соседей. Например, давайте выберем все ul, которые содержат одинокие li.
    Если мы пропишем ul li, то выбирутся все li. Выход —

    Работает в

    * IE9+
    * Firefox 3.5+
    * Chrome
    * Safari
    * Opera

    31) X:first-of-type

    Выбирает первого соседа выбранного типа

    Чтобы понять как это работает, рассмотрим пример:

    Задача — выделить Элемент Списка 2

    Решение 1

    выбираем первый ul, определяем непосредственно его дочерний элемент, порядковый номер 2

    Решение 2

    выбираем ul, следующие сразу после p. В ищем последний дочерний li

    Решение 3

    ищем первого соседа ul, и определяем первый с конца li

    Работает в

    * IE9+
    * Firefox 3.5+
    * Chrome
    * Safari
    * Opera

    Итог

    Наверное, вы заметили, что не все селекторы работают с IE6, так что, если вы до сих пор работаете и с этим браузером, будьте внимательны.
    Как альтернативный вариант, можно воспользоваться JavaScript- слекторами.

    Я надеюсь, статья пригодится, и вы возьмёте пару трюков на вооружение.

    Про CSS

    Css-селекторы

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

    Селекторы делятся на несколько видов:

    • по типу ( H1 , TD , HR . );
    • универсальный селектор — * — обозначает элемент любого типа;
    • селекторы атрибутов ( [data-name] , [data-name$=»hidden»] );
    • селекторы по классу ( .main , .header__nav );
    • селекторы по ID ( #form , #submit );
    • псевдо-классы:
      • динамические ( :hover и т.д.);
      • селектор цели ( :target );
      • селектор по языку ( :lang(en) );
      • состояния элементов интерфейса ( :enabled , :checked . );
      • структурные псевдоклассы ( :root , :nth-child );
      • псевдокласс отрицания ( :not(P) ).
    • псевдоэлементы ( :before , :first-line );
    • комбинаторы ( DIV SPAN , P + H1 );

    Селекторы ниже сгруппированы по спецификациям. Это поможет нам понять какие из них работают везде (из CSS1), какие работают почти везде (из CSS2), а какие кое-где могут и не работать.

    Селекторы из CSS1

    Самые простые и хорошо всем знакомые:

    • обращение к элементу по тегу ( BODY , A , TABLE и т.д.);
    • по ID ( #main );
    • по классу ( .header-image );
    • обращение к потомку через родителя ( UL A , .sidebar .widget );
    • состояния ссылок A:link , A:visited , A:hover ;
    • псевдоэлемент для первой строки текста — P::first-line ;
    • псевдоэлемент для первого символа в тексте — P::first-letter .

    Селекторы из CSS2

    В этой спецификации добавилось много интересного:

    * — универсальный селектор. Например, * уберет отступы у всех элементов на странице.

    E[foo] — элементы с заданым атрибутом.

    выберет только абзацы, у которых есть атрибут data-content:

    E[foo=»bar»] — элементы, у которых атрибут имеет заданное значение.

    =»bar»] — элемент, который имеет атрибут со списком значений, разделенных пробелом, одно из которых равно заданному.

    E[foo|=»bar»] — элемент, который имеет атрибут со списком значений, разделенных дефисом, который начинается с заданного.

    E:first-child — псевдокласс, обращающийся к первому элементу из нескольких внутри родителя.

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

    Для выбора первого элемента из списка дочерних элементов определенного типа существует другой селектор — :first-of-type , добавленный в CSS3.

    E:lang(fr) — выбирает элементы на заданном языке. Язык элемента может быть получен из HTTP-заголовков, отдаваемых сервером, из meta -тега, заданного в head , либо если у элемента задан атрибут lang

    Например, этот код добавит малиновый фон всем элементам, для которых язык определен как русский:

    E::before — генерируемый контент перед заданным элементом.

    E::after — генерируемый контент после элемента.

    E > F — выбирает элемент, только если он является прямым потомком родителя (ни во что больше не вложен).

    E + F — выбирает второй заданный элемент, который следует непосредственно после первого.

    Топ-пост этого месяца:  Топ плагинов jQuery. Плагин меню Slinky
    Добавить комментарий