10 CSS селекторов, без которых не следует верстать


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

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

Продвинутые CSS-селекторы, о которых вы, возможно, не знали

CSS – замечательная технология. Благодаря ей, сайты в сети становятся красочными и яркими. Очень часто используя CSS, разработчики присваивают элементам страницы значения атрибутов id и class для того, чтобы стилизовать их. Это замечательно, но что делать, если по какой-то причине у вас нет доступа к коду, чтобы добавить эти атрибуты к элементам?

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

Введение

Селекторы атрибутов замечательно поддерживаются большинством браузеров, но использовать их вместо идентификаторов и классов не всегда полезно. Дело в том, что в процессе поиска элемента (CSS или JavaScript), браузеру приходиться «обойти» весь DOM (Document Object Model) страницы, чтобы найти нужные элементы. При использовании селекторов атрибутов на поиск затрачивается больше ресурсов и времени. Поэтому не стоит злоупотреблять этими селекторами и использовать их только в том случае, если у вас нет другого выхода: например, HTML-код генерируется динамически, и вы никак не можете добавить в него классы или идентификаторы.

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

Значение атрибута заканчивается определенными символами ($=)

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

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

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

Так как мы нацелены на определенное значение суффикса в атрибуте id , нам необходимо указать его в скобках, а в имени атрибута использовать $.

Вы можете использовать этот селектор для любых HTML-элементов ( div , span , img и тп) и любых их атрибутов ( id , name , value и тп).

Значение атрибута начинается с определенных символов (^=)

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

Довольно просто, неправда ли? Единственное отличие двух описанных селекторов состоит в том, что перед знаком равно (=), находятся разные символы. Как вы могли заметить, в этом примере использован атрибут class , вместо id . CSS – довольно «гибкий» инструмент, он позволяет обращаться к элементам на странице различными способами, используя разные атрибуты.

Значение атрибута содержит определенные символы (*=)

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

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

Из примера можно сделать вывод, что любой div , который содержит в значении атрибута текст “logoutPanel” будет выбран и к нему будут применены определенные стили.

Значение атрибута эквивалентно определенным символам (=)

Это еще один способ выбора элемента с определенным значением идентификатора, класса, атрибутов name , value и тп.

Вы можете обратиться к элементу (div c классом 3453_mydynamicdiv ) двумя различными способами: используя указанный выше атрибут, а также стандартным способом через атрибут класса.

Итак, подытожим. В статье были рассмотрены следующие селекторы атрибутов:

  • = — значение атрибута эквивалентно определённым символам;
  • $= — значение атрибута заканчивается определенными символами;
  • ^= — значение атрибута имеет определенные символы вначале;
  • *= — значение атрибута состоит из определенных символов;

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

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

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

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

Селектор псевдокласса :not(x) – удаляет из набора определенные элементы на основе переданного параметра. Это бывает очень полезно при стилизации всех элементов за исключением тех, которые переданы в :not() в качестве аргументов.

В этом примере выбираются все элементы списка за исключением элемента с классом hightlight .

Вы можете выбирать любые элементы на основе различных атрибутов. Например:

Псевдоэлемент ::first-letter

Помимо псевдоклассов в CSS существуют псевдоэлементы. ::first-letter как раз относится к псевдоэлементам. С его помощью вы можете стилизовать первую букву любого абзаца. Этот эффект называется «буквица», он часто применялся в печатных изданиях и выглядел довольно интересно. В сети также можно встретить использование буквицы, как правило, бывает это в статьях блогов. Сделать буквицу при помощи псевдоэлемнта ::first-letter довольно просто.

Если вы не хотите стилизовать первые буквы в каждом абзаце, можно выбрать только первый абзац во всем тексте. Для этого нужно использовать вместе псевдокласс и псевдоэлемент ( :first-child и ::first-letter ).

Этот подход освобождает вас от использования решений на JavaScript или каких-либо CSS-хаков.

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

Псевдокласс :first-of-type используется довольно часто при стилизации HTML-элементов. Он позволяет выбрать первый элемент определенного типа внутри родительского элемента и применить к нему CSS-правила.

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

Как вы уже наверное догадались, селектор :last-of-type работает противоположно селектору :first-of-type . Ну и конечно же, псевдокласс :first-of-type не может существовать без :last-of-type .

Заключение

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


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

Отступ для всех блоков, кроме первого или последнего

К примеру: есть список с четырьмя элементами

между которыми нужно сделать отступ по высоте, так, чтобы при li < margin-top; >первый элемент списка не сдвигался вниз от края родителя.
Если проще: нужно чтобы для первого li, margin-top не срабатывал.

Тоже самое справедливо и для margin-bottom , только в этом случаи — отступа не должно быть после последнего элемента.

Понятно что сдвигаемому элементу можно назначить признак(например дать класс) и уже по нему назначить margin , но неужели в CSS нет отдельного свойства для этого?

2 ответа 2

Может так что-то можно сварганить?

:first-child — применяет стилевое оформление к первому дочернему элементу своего родителя.

:last-child — задает стилевое оформление последнего элемента своего родителя.

:not — задаёт правила стилей для элементов, которые не содержат указанный селектор.

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 селектор — это часть правила, с помощью которого можно выбирать элемент в 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-селекторы – фундаментально полезная вещь.

    Даже если вы почему-то (старый 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 селекторы, содержащие класс и ID элементов

    Перевод статьи: Multiple class ID selectors.
    Автор: Chris Coyier.

    Взгляните на приведенные ниже два CSS селектора. Сможете ли вы определить их функциональное отличие:

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

    Верхний селектор #header.callout имеет следующую аннотацию:

    Нижнему селектору #header.callout соответствует другое определение:

    Возможные комбинации имен классов и идентификаторов в CSS селекторах.

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

    Комбинация из ID и имени класса.

    Такой вид CSS селектора рассмотрен выше. Приведем лишь еще один наглядный пример:

    Текст этого заголовка должен быть красным.

    и соответствующий этому элементу CSS код:

    Вариант из нескольких имен классов.

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

    Используем несколько имен классов

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

    Сложные комбинации.

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

    Пример использования.

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

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

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

    Селекторы, состоящие из нескольких имен классов, являются более популярными и полезными. Хочется обратить особое внимание на их применение в так называемом объектно ориентированном CSS стилевом оформлении документов, которое является предметом различных споров. К примеру, у вас имеется некоторое количество блоков

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

    Теперь давайте определим, указанные в HTML разметке CSS классы:

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

    Специфичность рассмотренных селекторов.

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

    Как правильно писать вложенность в CSS?

    Как правильно писать:

    или это одно и тоже? Для чего используется > ?

    • Вопрос задан более года назад
    • 787 просмотров

    это указание прямого потомка, добавите вложенность и первый вариант перестанет работать
    div.title > a — только a именно в этом диве
    div.title a — все a в этом диве не зависимо от вложенности
    Для

    сработает только второе
    для

    > — указания на потомка.

    div.title > a > span <> — мне нужен span , который находится в a , который находится в div.title (лучше читать справа-налево).

    div.title a span <> — мне нужны все span , которые находятся во всех a , которые находятся в div.title

    Это называется «css-селекторы». Изучите документацию по CSS:

    Урок 8. Селекторы CSS. Задаем CSS-правила

    Без селекторов задавать стили для элементов html-страницы очень сложно. Необходимо было бы прописывать стили с помощью атрибута style у каждого элемента, это нерационально и долго. Существование селекторов и файла CSS существенно упрощает задачу. В этом css-уроке разберемся с тем, какие же существуют селекторы.

    Селекторы по тегу, классу и id

    Этот тип селекторов указывает на все элементы страницы с определенным тегом. Чтобы прописать стили по тегу, необходимо взять название тега и в фигурных свойствах отметить все свойства для них. Что касается селектора по классу, то необходимо указать сначала название класс, а потом в фигурных скобках css-свойства для него. Для селектора по id ситуация идентичная.

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

    Вложенные и соседние селекторы

    Далее поговорим о вариациях, как можно проще задавать стили для различных элементов, не прибегая к использованию классов. Часто мы должны задать стили только для вложенных элементов. Допустим определенные стили ТОЛЬКО у ссылок меню или ТОЛЬКО у абзацей определенного блока, например, блока с контентом. Для этого используется понятие вложенных селекторов. Необходимо слева направо задать порядок вложенности.

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

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

    Например, для селектора по классу .sec применется отступ сверху, если он стоит после элемента с классом .first:

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

    Стили для дочерних селекторов. Чем дочерние элементы отличаются от потомков

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

    В данном примере стили применяются только для элемента span вложенного непосредственно в .content, а для span внутри абзаца не применяются.

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

    Еще одно уточнение для задания стилей. Расширяет наши возможности и сужает область применения без использования дополнительных классов и конструкций. Псевдоклассы задаются через символ двоеточия. Перечислим часто используемые и кратко познакомимся с ними:

    • first-child и last-child. Задает стили для первого и последнего дочернего элемента внутри родителя. Например, стили только для первого абзаца внутри контентной области.
    • nth-of-type. Идея схожа с предыдущем псевдоклассом. Указывает на элеменет в зависимости его расположения внутри родителя. Только здесь еще точнее, может отметить не только первый и последний элементо, но и с любым порядковым номер. Синтаксис такой селектор:nth-child(значение). Значение может быть целочисленное или заданное с помощью формулы. Например, для всех четных абзацей можно использовать такую запись:
    • hover. С помощью этого псевдокласса можно отследить такое действие пользователя, как наведение на элемент и задать при этом стилистические особенности. Например, при наведении на ссылку уберем ее подчеркивание.
    • :link, :visited и :active. Специальные псевдоклассы для работы со ссылками. С помощью них можно добавить стили непосещенных, посещенных и активных ссылок.
    • :focus. Псевдокласс для элементов в фокусе, например для input куда мы на данный момент вводим значение.

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

    Топ-пост этого месяца:  Для чего нужно изучение vanilla JavaScript основные преимущества знания JS с нуля
    Добавить комментарий