CSS от А до Я как использовать CSS селектор nth-child


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

30 CSS-селекторов, которые вы должны знать

Поговорим о CSS селекторах. Помимо обычного обращения к элементам через имя класса, >

1. * — выделение всех элементов

Начнем с простых селекторов, и затем рассмотрим более сложные. Многие разработчики используют его для того, чтобы скинуть у всех элементов значения margin и padding . На первый взгляд это удобно, но все-таки в рабочем коде так лучше не делать. Этот CSS-селектор слишком сильно грузит браузер.

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

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

2. #X

Знак решетки перед CSS-селектором выделит нам элемент с . Это очень просто, но будьте аккуратны при использовании id.

Спросите себя: мне абсолютно необходимо выделение по id?

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

3 .Х

Это CSS-селектор класса Х. Разница между id и классом заключается в том, что одному классу может принадлежать несколько элементов на странице. Используйте классы, когда вы хотите применить стиль к нескольким однотипным элементам. При использовании id вам придется писать стиль для каждого отдельного элемента.

4. Х Y

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

Не следует делать CSS-селекторы вида Х Y Z A B.error . Всегда спрашивайте себя, а обязательно ли для выделения данного элемента писать такой громоздкий CSS-селектор.

5. X

Что делать, если вы хотите, чтобы охватить все элементы данного типа на странице? Будьте проще, используйте CSS-селектор типа. Если вы должны выделить все неупорядоченные списки, используйте ul <>

6. X:visited and X:link

Мы используем псевдо-класс :link , для выделения всех ссылок, на которые еще не кликнули.

Если же нам надо применить определенный стиль у уже посещенным ссылкам, то используем псевдо-класс :visited .

7. Х+Y

Выделяет последующий элемент. Он будет выбирать только элемент типа Y, который идет сразу после элемента Х. В примере текст первого абзаца после каждого ul будет красного цвета.

8. Х>Y

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

CSS-селектор #container > ul выберет только ul , которые являются непосредственными дочерними элементами div с >. Он не выберет, например, ul , являющиеся дочерними элементами первых li .

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

9. Х

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

10. X[title]

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

11. X [href=»Foo»]

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

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

Хорошее правило, но слишком строгое. Что же делать, если ссылка ведет не непосредственно на yandex.ru, а например на http://yandex.ru/page1? В этих случаях мы можем использовать регулярные выражения.

12. X [HREF *= «yandex.ru»]

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

Но что делать, если ссылка ведет на какой-то сторонних и не связанный ресурс, в адресе которого присутствует yandex? Тогда нужно использовать «^»или «&», для ссылки на начало и конец строки соответственно.

13. X[href^=»http»]

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

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

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

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

14. X [href$=». JPG»]

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

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

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

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

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

16. X[foo

А вот кое-что особенное. Не все знают об этом CSS-селекторе. Тильда (

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

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

Вот, Html-код на месте, теперь напишем стили.

17. X:checked

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

18. X:after

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

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

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

Согласно спецификации CSS3, вы должны использовать два двоеточия (::). Однако, можно использовать и одно двоеточие для совместимости.

19. X:hover

Хотите применить стиль к элементу, когда наводите на него мышкой? Тогда этот CSS-селектор для вас.

Имейте в виду, что старые версии Internet Explorer применяют :hover только к ссылкам.

Этот CSS-селектор часто используют для того, чтобы поставить border-bottom на ссылки, когда на них наводят мышкой.

border-bottom: 1px solid black; выглядит лучше, чем text-decoration: underline;

  • IE6 + (В IE6: hover должен быть применен к ссылке)
  • Firefox
  • Хром
  • Safari
  • Опера

20. X:not(selector)

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

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

21. X::псевдоэлемент

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

Псевдо-элемент задается двумя двоеточиями: ::

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

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

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

Аналогичным образом благодаря ::first-line мы задаем стиль первой строки в абзаце.

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

22. X:nth-child(n)

Раньше мы не могли выделить, например, третий дочерний элемент? nth-child решает это!

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

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

23. X:nth-last-child(n)

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

Этот метод почти идентичен приведенному выше, однако отсчет ведется с конца.

24. X:nth-of-type(n)

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

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

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

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

26. X:first-child

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

27. X:last-child

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

  • IE9 + (Да да, IE8 поддерживает :first-child , но не поддерживает :last-child . Microsoft-у привет! )
  • Firefox
  • Хром
  • Safari
  • Опера

28. X:only-child

Вы не часто встретите этот псевдокласс, тем не менее он существует.

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

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

29. X:only-of-type

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

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

30. X:first-of-type

first-of-type выбирает первый элемент заданного типа. Чтобы лучше понять, посмотрим на пример.

А теперь попытайтесь понять как выделить пункт 2.

Решение 1

Решение 2

Решение 3

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

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 псевдо-класс :nth-child(n)

    Поддержка браузерами

    12.0+ 9.0+ 3.5+ 4.0+ 9.6+ 3.2+

    Описание

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

    Синтаксис

    В круглых скобках указывается аргумент, который может быть числом, ключевым словом или числовым выражением в виде an+b, где a и b целые числа, а n — счётчик, автоматически принимающий целые неотрицательные значения от 0 и больше: 0, 1, 2, 3, . .

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

    Всего есть два возможных ключевых слова: odd (нечётные) и even (чётные). Они позволяют выбирать дочерние элементы имеющие чётные или нечётные порядковые номера:

    Часть выражения «an» вычисляет позиции дочерних элементов по следующей формуле: число*n, так как n — счётчик, вместо него при вычислении автоматически подставляются числовые значения начиная с 0 и далее значение каждый раз увеличивается на единицу больше предыдущего: 0,1,2,3 и т.д. Допустим нам необходимо выбрать каждый третий пункт списка, для этого нам надо написать всего лишь 3n:

    Таким образом пункты списка будут выбираться по следующей формуле:
    3 * 0 = 0 — ничего не выбрано
    3 * 1 = 3-ий пункт
    3 * 2 = 6-ой пункт
    и т.д.

    Часть выражения «b» позволяет указать с какой позиции следует начинать выбор элементов. Допустим нам необходимо выбрать каждый третий пункт списка начиная со второго пункта в списке, для этого нам надо написать следующее выражение 3n + 2:

    Таким образом пункты списка будут выбираться по следующей формуле:
    (3 * 0) + 2 = 2-ой пункт
    (3 * 1) + 2 = 5-ый пункт
    (3 * 2) + 2 = 8-ой пункт
    и т.д.

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

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

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

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

    Первый селектор выберет второй элемент списка, второй селектор — четвёртый элемент списка, третий селектор — все чётные элементы.

    Использование псевдокласса CSS :nth-child

    15 марта 2015 | Опубликовано в css | 2 Комментариев »

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

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

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

    Еще в качестве примера для понимания псевдокласса:nth-child мы выберем с его помощью каждый четвертый элемент, т. е., четвертый, восьмой, двенадцатый, шестнадцатый и т. д. Для этого разделим элементы на группы по четыре и затем выберем каждый четвертый элемент.

    Ниже приведен список из десяти элементов, и мы воспользуемся псевдоклассами :nth-child, :first-child и :last-child, чтобы выбрать элементы, которые хотим выделить.

    Использование псевдокласса CSS :nth-child для выбора единственного элемента

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

    • Элемент 1
    • Элемент 2
    • Элемент 3
    • Элемент 4
    • Элемент 5
    • Элемент 6
    • Элемент 7
    • Элемент 8
    • Элемент 9
    • Элемент 10

    Использование псевдокласса CSS :nth-child для выбора всех элементов, кроме первых пяти

    Если задать псевдоклассу :nth-child значение в виде n+ число, можно выбрать все элементы, начиная с элемента с этим порядковым номером:

    • Элемент 1
    • Элемент 2
    • Элемент 3
    • Элемент 4
    • Элемент 5
    • Элемент 6
    • Элемент 7
    • Элемент 8
    • Элемент 9
    • Элемент 10

    Использование псевдокласса CSS :nth-child для выбора только первых пяти элементов

    Когда мы задаем псевдоклассу :nth-child значение в виде отрицательного n+ число, мы выбираем все элементы, находящиеся до элемента с этим порядковым номером:

    • Элемент 1
    • Элемент 2
    • Элемент 3
    • Элемент 4
    • Элемент 5
    • Элемент 6
    • Элемент 7
    • Элемент 8
    • Элемент 9
    • Элемент 10

    Использование псевдокласса CSS :nth-child для выбора каждого третьего элемента

    Псевдокласс :nth-child можно использовать, чтобы выбрать последовательность элементов, задавая, сколько элементов в последовательности и порядковый номер нужного элемента. Если задать значение 3n+1, будет выбран каждый третий элемент, начиная с первого:

    • Элемент 1
    • Элемент 2
    • Элемент 3
    • Элемент 4
    • Элемент 5
    • Элемент 6
    • Элемент 7
    • Элемент 8
    • Элемент 9
    • Элемент 10

    Использование псевдокласса CSS :nth-child для выбора только нечетных элементов

    Можно задать псевдоклассу :nth-child значение odd (нечетный), чтобы выбрать все элементы с нечетными порядковыми номерами. Т.е., первый, третий, пятый, седьмой, девятый и т. д элементы. Это очень удобно, чтобы задавать цвета соседним рядам таблицы.

    • Элемент 1
    • Элемент 2
    • Элемент 3
    • Элемент 4
    • Элемент 5
    • Элемент 6
    • Элемент 7
    • Элемент 8
    • Элемент 9
    • Элемент 10

    Использование псевдокласса CSS :nth-child для выбора только четных элементов

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

    • Элемент 1
    • Элемент 2
    • Элемент 3
    • Элемент 4
    • Элемент 5
    • Элемент 6
    • Элемент 7
    • Элемент 8
    • Элемент 9
    • Элемент 10

    Использование псевдокласса CSS :first-child для выбора первого элемента

    Другой псевдокласс :first-child выберет первый элемент:

    • Элемент 1
    • Элемент 2
    • Элемент 3
    • Элемент 4
    • Элемент 5
    • Элемент 6
    • Элемент 7
    • Элемент 8
    • Элемент 9
    • Элемент 10

    Использование псевдокласса CSS :last-child для выбора последнего элемента

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

    • Элемент 1
    • Элемент 2
    • Элемент 3
    • Элемент 4
    • Элемент 5
    • Элемент 6
    • Элемент 7
    • Элемент 8
    • Элемент 9
    • Элемент 10

    Использование псевдокласса CSS :nth-last-child для выбора предпоследнего элемента

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

    • Элемент 1
    • Элемент 2
    • Элемент 3
    • Элемент 4
    • Элемент 5
    • Элемент 6
    • Элемент 7
    • Элемент 8
    • Элемент 9
    • Элемент 10

    Ознакомьтесь с возможностями псевдокласса :nth-child с помощью «Конструктора nth-child».

    Дополнительные материалы

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

    Автор урока Paul Underwood

    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: Как работает псевдо селектор nth-child

    Пример использования псевдо селектора nth-child:

    Что делает селектор nth-child в данном примере? Выбирает каждый третий LI элемент неупорядоченного списка, то-есть 3, 6, 9, 12 и т.д.

    Давайте посмотрим как он работает и какие еще есть варианты использования.

    Внутри скобок можно написать even и odd. В этом случае будут выбраны все четные или нечетные элементы соответственно. Также, как вы уже видели в предыдущем примере, внутри скобок может находиться выражение. Самое простое выражение, это число. Если вы в скобках напишете число, тогда селектором будет выбрано только элемент с этим поряддковым номером. Вот так можно выбрать пятый элемент :

    Теперь давайте вернемся к выражению «3n+3» из первого примера. Как он работает? Представте себе, что «n» представляет из себя любое целое положительное число, включая ноль, а выражение 3n обозначает «3 X n» (три умноженное на n). Раскроем полностью выражение в скобках: «(3 X n) + 3». Подставив все варианты значений «n» мы получим:

    Для селектора :nth-child(2n+1) будут выбраны следующие элементы:

    Это выражение выводит результат аналогично тому, если в скобках поставить odd. Давайте попробуем упростить выражение из первого примера, что если вместо выражения «3n+3» мы поставим «3n+0», или даже «3n»?

    Таким образом, совпадения теже самые и нет необходимости использовать «+3». Также в скобках можно указывать отрицательные значения «n», а также применять операции вычитания. Например, 4n-1:

    Использование отрицательных значений «n» может показаться странным, так как в конечном результатае оно не даст совпадений, а для того, чтоб совпаделния в выражении были, нужно добавить определенное число, чтоб в сумме выражение снова стало положительным. Но как оказалось эта техника довольно-таки хитрая. Использование выражения «-n+3» позволяет выбирать первые «n» элементов:

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

    n 2n+1 4n+1 4n+4 4n 5n-2 -n+3
    1 1 4 3
    1 3 5 8 4 3 2
    2 5 9 12 8 8 1
    3 7 13 16 12 13
    4 9 17 20 16 18
    5 11 21 24 20 23

    Совместимость с браузерами

    nth-child — это один тех CSS атрибутов, который практически полностью поддерживается современными браузерами, за исключением IE, даже восьмой версии. Таким образом, если перед вами стоит задача создания сайта, который полностью поддерживается максимально возможным количеством браузеров, то его использовать не стоит. Зато если вы хотите реализовать некоторые функции, которые улучшат визуальное восприятие информации на вашем сайте, но при этом сама разметка страницы останется нетронутой — тогда этот атрибут будет вам весьма к стати, ведь с его помощью вы сможете приметяь красивые цветовые схемы для таблиц и других коллекций элементов.

    Если вы используете jQuery — вам повезло. Он поддерживает все CSS селекторы, включая :nth-child, который будет работать даже в Интернет эксплоере.

    Селекторы в 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 включительно. Это можно сделать вот так:

    Как работает селектор CSS3: nth-child()?

    Может ли кто-нибудь объяснить мне, как работает CSS3: селектор nth-child()?

    В приведенном ниже примере первый элемент

    выбран, несмотря на то, что :nth-child(n) имеет значение 2.

    Хорошим примером для понимания свойства nth-child может быть список.

    Этот селектор выберет все элементы, которые являются n-м детьми их родителей. В вашем случае p является вторым потомком родительского , поэтому он выбирается.

    Запустите этот фрагмент, чтобы проверить поведение:

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

    The first paragraph.

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

    Посмотрите другие вопросы по меткам css css3 или Задайте вопрос

    Часть 3. Дочерние селекторы CSS. Дополнительные псевдоклассы

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

    Дочерние селекторы CSS

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

    Представьте, что вам нужно присвоить стиль только тем тегам

    , которые являются дочерними по отношению к , не затрагивая остальные

    , дочерние по отношению к

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

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

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

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

    В CSS3 существует ряд псевдоклассов для работы с дочерними элементами. Ниже приведено описание каждого из них, примеры использования, а также отличия между псевдоклассами вида «child» и «of-type».

    • :first-child – с помощью этого псевдокласса можно применить стиль к указанному элементу веб-страницы, при условии, что он является первым дочерним элементом своего родителя;
    • :last-child – стиль применяется к указанному элементу веб-страницы при условии, что он является последним дочерним элементом своего родителя;
    • :nth-child – позволяет выбрать четные (even) и нечетные (odd) дочерние элементы; также с помощью данного псевдокласса можно стилизовать чередующиеся дочерние элементы, используя выражения вида an+b и числа;
    • :only-child – применяется к дочернему элементу при условии, что тот является единственным ребенком у родителя;
    • :first-of-type – стиль применяется к первому элементу указанного типа (даже если этот элемент не является первым дочерним для своего родителя и над ним находятся другие дочерние элементы других типов);
    • :last-of-type – работает точно так же, как и предыдущий псевдокласс, с той лишь разницей, что стиль применяется к последнему элементу указанного типа;
    • :nth-of-type – по принципу работы похож на :nth-child , но ориентируется на тип элемента;
    • :only-of-type – применяется к дочернему элементу указанного типа при условии, что тот является у родителя единственным ребенком своего типа.

    Пример использования :first-child, :last-child и :nth-child

    Скриншот: применение :first-child, :last-child и :nth-child

    Мы написали CSS стиль для дочерних элементов простого HTML-документа, где тег

    ,

    . Разберем CSS по порядку.

    Первое правило – p:first-child – касается элемента p : если он является первым дочерним элементом своего родителя, то к нему применяется стиль (в нашем случае это жирный шрифт и преобразование текста в верхний регистр). Если в данный HTML-код сразу после открывающего тега

    ), то стиль p:first-child уже не будет отображаться, поскольку

    перестанет быть первым дочерним тегом. В данном случае первым дочерним элементом будет h2 .

    Всё то же самое происходит и с правилом p:last-child – стиль CSS будет применен к тегу

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

    любой другой тег отличного типа и вы увидите, что правило p:last-child перестанет применяться.

    Правило p:nth-child(3) работает для третьего дочернего тега

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

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

    Пример использования :first-of-type, :last-of-type, :nth-of-type и :only-of-type

    Скриншот: применение :first-of-type, :last-of-type, :nth-of-type и :only-of-type

    Первое правило CSS, которое вы видите – это p:first-of-type . Что оно делает? Оно выбирает дочерний элемент типа p , который первым встречается у родителя. И не важно, на каком месте среди элементов других типов находится данный тег – на первом, втором или десятом. В этом и заключается отличие между псевдоклассами :first-child и :first-of-type .

    Второе правило – p:last-of-type – применяет стиль к последнему дочернему элементу типа p . Как видно из HTML-кода, после последнего тега

    , присутствие которого никак не влияет на выполнение CSS-правила (в отличие от варианта с :last-of-child ).

    Следующее правило – p:nth-of-type(3) – изменяет цвет шрифта на красный. Применяется этот стиль к тегу

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

    , который по факту является пятым ребенком тега

    с красным шрифтом находится на третьем месте (среди тегов своего типа). Таким образом работает данное правило.

    Правила p:nth-of-type(even) и p:nth-of-type(odd) работают аналогично: поскольку перед двоеточием указано имя p , то выбираются четные и нечетные дочерние элементы типа p и окрашиваются в заданные цвета. Остальные элементы пропускаются.

    Последнее правило – h3:only-of-type – применяется к содержимому тега

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

    является единственным дочерним элементом своего типа. Если в HTML-код добавить еще один тег

    , стиль не будет применён.

    Выводы

    Дочерний селектор CSS позволяет изменить стиль дочернего элемента HTML-документа, исходя из того, кто является его родителем.

    С помощью дополнительных псевдоклассов :first-child, :last-child, :nth-child, :only-child можно стилизовать дочерние элементы HTML-документа, ориентируясь на их местоположение, нумерацию в дереве элементов.

    Псевдоклассы :first-of-type, :last-of-type, :nth-of-type, :only-of-type позволяют применять стиль к дочерним элементам HTML-документа, ориентируясь на их тип, а также на нумерацию в дереве элементов.

    Топ-пост этого месяца:  Актуальное SEO как работают ссылки сегодня
    Добавить комментарий