Что выберет селектор. Селекторы. Более реальный и сложный пример

Описание

Родственные селекторы по своему поведению похожи на соседние селекторы (запись вида E + F), но в отличие от них стилевые правила применяются ко всем близлежащим элементам. К примеру, для селектора h1~p стиль будет применяться ко всем элементам

Располагающихся после заголовка

. При этом

и

Должны иметь общего родителя, так что если

Вставить внутрь

, то стили применяться уже не будут.

Здесь красный цвет текста будет установлен для всех абзацев.

H1 ~ p { color: red; }

Заголовок

Абзац 1

Абзац 2

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

и

Не имеют общего родителя.

H1 ~ p { color: red; }

Заголовок

Абзац 1

Абзац 2

Абзац 3

Синтаксис

E ~ F { Описание правил стиля }

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

HTML5 CSS3 IE Cr Op Sa Fx

Селекторы

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

В данной статье речь пойдет про CSS-селекторы. Будут рассмотрены как старые CSS-селекторы, которые поддерживает даже IE6, так и совсем новые CSS3-селекторы, которые поддерживают только последние версии браузеров. Итак, начнем.

1.

* { margin: 0; padding: 0; }

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

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

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

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

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

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

  • IE6 +
  • Firefox
  • Chrome
  • Safari
  • Opera

2. #X

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

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

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

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

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

  • IE6 +
  • Firefox
  • Chrome
  • Safari
  • Opera

3 .Х

error { color: red; }

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

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

  • IE6 +
  • Firefox
  • Chrome
  • Safari
  • Chrome

4. Х Y

li a { text-decoration: none; }

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

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

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

  • IE6 +
  • Firefox
  • Chrome
  • Safari
  • Chrome

5. X

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

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

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

  • IE6 +
  • Firefox
  • Chrome
  • Safari
  • Opera
a:link { color: red; } a:visted { color: purple; }

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

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

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

  • IE7 +
  • Firefox
  • Chrome
  • Safari
  • Opera

7. Х+Y

ul + p { color: red; }

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

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

  • IE7 +
  • Firefox
  • Chrome
  • Safari
  • Chrome

8. Х>Y

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

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

  • Элемент списка
    • Дочерний элемент
  • Элемент списка
  • Элемент списка
  • Элемент списка

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

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

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

  • IE7 +
  • Firefox
  • Chrome
  • Safari
  • Opera

9. Х ~ Y

ul ~ p { color: red; }

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

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

  • IE7 +
  • Firefox
  • Chrome
  • Safari
  • Opera

10. X

a { color: green; }

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

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

  • IE7 +
  • Firefox
  • Chrome
  • Safari
  • Opera

11. X

a { color: #ffde00; }

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

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

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

  • IE7 +
  • Firefox
  • Chrome
  • Safari
  • Chrome

12. X

a { color: # 1f6053; }

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

  • IE7 +
  • Firefox
  • Chrome
  • Safari
  • Opera

13. X

a { background: url(path/to/external/icon.png) no-repeat; padding-left: 10px; }

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

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

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

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

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

  • IE7 +
  • Firefox
  • Safari
  • Опера

14. X

a { color: red; }

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

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

  • IE7 +
  • Firefox
  • Safari
  • Опера

15. X

a{ color: red; }

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

A, a, a, a { color: red; }

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

Ссылка на изображение

A { color: red; }

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

  • IE7 +
  • Firefox
  • Safari
  • Опера

16. X

a { color: red; } a { border: 1px solid black; }

А вот кое-что особенное. Не все знают об этом CSS-селекторе. Тильда (~) позволяет выделить определенный атрибут из списка атрибутов, разделенных запятой.

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

Click Me

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

Неплохо, да?

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

  • IE7 +
  • Firefox
  • Safari
  • Опера

17. X:checked

input:checked { border:1px solid black; }

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

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

  • IE9 +
  • Firefox
  • Safari
  • Опера

18. X:after

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

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

Clearfix:after { content: ""; display: block; clear: both; visibility: hidden; font-size: 0; height: 0; } .clearfix { *display: inline-block; _height: 1%; }

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

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

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

  • IE8 +
  • Firefox
  • Safari
  • Опера

19. X:hover

div:hover { background: #e3e3e3; }

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

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

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

A:hover { border-bottom: 1px solid black; }

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

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

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

20. X:not(selector)

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

Псевдокласс отрицания бывает очень полезным. Скажем, нужно выбрать все div, за исключением того, который имеет id = container . Приведенный выше код справиться с этим!

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

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

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

  • IE9 +
  • Firefox
  • Safari
  • Опера

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

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

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

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

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

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

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

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

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

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

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

  • IE6 +
  • Firefox
  • Safari
  • Опера

22. X:nth-child(n)

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

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

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

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

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

  • IE9 +
  • Firefox 3,5 +
  • Safari

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

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

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

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

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

  • IE9 +
  • Firefox 3,5 +
  • Safari
  • Опера

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

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

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

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

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

  • IE9 +
  • Firefox 3,5 +
  • Safari

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

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

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

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

  • IE9 +
  • Firefox 3,5 +
  • Safari
  • Опера

26. X:first-child

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

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

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

  • IE7 +
  • Firefox
  • Safari
  • Опера

27. X:last-child

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

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

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

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

28. X:only-child

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

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

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

Один параграф.

Два параграфа

Два параграфа

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

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

  • IE9 +
  • Firefox
  • Safari
  • Опера

29. X:only-of-type

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

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

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

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

  • IE9 +
  • Firefox 3,5 +
  • Safari
  • Опера

30. X:first-of-type

first-of-type выбирает первый элемент заданного типа.

Чтобы лучше понять, приведем

Параграф

  • Пункт 1
  • Пункт 2
  • Пункт 3
  • Пункт 4

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

Решение 1

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

Решение 2

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

Решение 3

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

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

  • IE9 +
  • Firefox 3,5 +
  • Safari
  • Опера

Всем доброго времени суток. На связи Алексей Гулынин. В данной статье я бы хотел рассказать, какие новые селекторы появились в CSS3 . Сразу отмечу, что все старые селекторы (селекторы тегов, класса, id, псевдоселекторы) также остались. С появлением новых селекторов намного упрощается работа верстальщика, так как сейчас для того, чтобы сделать что-то, не нужно придумывать велосипед и изобретать очередной костыль. Давайте создадим html-страницу, на которой будем тестировать новые селекторы:

Новые селекторы CSS3

Блок 1: Текст, текст, текст

Селектор first-child позволяет задать стиль первому элементу. Чтобы было понятнее сразу пример:

Ul li:first-child { background: red; }

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

Селектор last-child позволяет задать стиль последнему элементу. Пример:

Ul li:last-child { background: green; }

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

Селектор nth-child() , в параметрах которого необходимо передать тот элемент, к которому нужно применить стили:

Ul li:nth-child(2) { background:yellow; }

В данном случае 2 элемент списка станет желтым. Обратите внимание на синтаксис: после ":" пробела быть не должно.

С появлением CSS3 стало возможным изменить цвет выделения. Когда мы выделяем текст на странице в браузере, он обычно становится белым на синем фоне.
Селектор ::selection позволяет настроить это дело под наш вкус:

::selection { background: pink; color: brown; }

Наберите данный пример и попробуйте что-нибудь выделить (цвет выделения должен измениться).

Теперь можно фильтровать элементы на странице. Допустим нам нужно отобрать все блоки, id которых начинается с "te". Для этого нужно написать следующий код:

Div { background: #4c4c4c; }

Конструкция "^=" означает, что id (в нашем случае) должен начинаться "te". Запустите данный пример и посмотрите результат работы. С помощью следующей конструкции можно отобрать элементы, которые заканчиваются на что-то определенное. Допустим у нас есть на странице картинки в формате jpeg и png. Мы хотим всем картинкам в формате png добавить рамку. Делается это следующим образом.

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

1) .Х

.topic-title { background-color: yellow; }

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

  • Chrome
  • Firefox
  • Safari
  • Opera

2) #X

#content { width: 960px; margin: 0 auto; }

CSS селектор по id . Знак решетки перед CSS селектором Х выбирает элемент у которого id = Х. Навешивая стили по id всегда стоит помнить, что он должен быть уникальным – только один такой id должен быть на странице. Поэтому лучше использовать селекторы по классам, комбинациям классов или названиям тэгов. Тем не менее, селекторы по id отлично применяются в автоматизированном тестировании, т.к. позволяют сразу взаимодействовать именно с нужным элементом и иметь уверенность что он только один такой на странице.

    Какими браузерами поддерживается:
  • Chrome
  • Firefox
  • Safari
  • Opera

3) *

* { margin: 0; padding: 0; }

CSS селектор всех элементов . Символ звездочки выбирает все элементы которые есть на странице. Многие разработчики используют его для того, чтобы убрать (обнулить) значения отступов (margin и padding) у всех элементов страницы. Тем не менее, на практике лучше так не делать потому, что этот CSS селектор довольно сильно грузит браузер перебором всех элементов на странице.

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

#header * { border: 5px solid grey; }

В этом примере выделяются все дочерние элементы (потомки) элемента с #header . Но всегда стоит помнить, что этот селектор достаточно тяжел для браузера.

    Какими браузерами поддерживается:
  • Chrome
  • Firefox
  • Safari
  • Opera

4) X

a { color: green; } ol { margin-left: 15px; }

CSS селектор типа . Как выбрать все элементы одного типа, если у них нет ни id ни классов? Стоит использовать CSS селектор по типу элемента. К примеру, чтобы выбрать все упорядоченные списки на странице, используйте ol {...} как это показано выше.

    Какими браузерами поддерживается:
  • Chrome
  • Firefox
  • Safari
  • Opera

5) Х Y

li a { font-weight: bold; text-decoration: none; }

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

    Какими браузерами поддерживается:
  • Chrome
  • Firefox
  • Safari
  • Opera

6) Х + Y

div + p { font-family: "Helvetica Neue", Arial, sans-serif; font-size: 18px; }

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

    Какими браузерами поддерживается:
  • IE7 +
  • Firefox
  • Chrome
  • Safari
  • Chrome

7) Х > Y

#content > ul { border: 1px solid green; }

CSS селектор потомков . Разница между селекторами Х Y и X > Y в том, что рассматриваемый CSS селектор будет выбирать только непосредственные дочерние элементы (выберет только прямых потомков). К примеру:

  • Элемент списка
    • Потомок первого элемента списка
  • Элемент списка
  • Элемент списка

CSS селектор #content > ul выберет только ul, который является прямым потомком блока div с id="container" . Он не выберет ul, являющийся потомком первого li. Это достаточно выгодный по скорости работы CSS селектор.

    Какими браузерами поддерживается:
  • Chrome
  • Firefox
  • Safari
  • Opera

8) Х ~ Y

ol ~ p { margin-left: 10px; }

Селектор сестринских (саблинговых) элементов менее строгий чем X + Y. Он выберет не только первый, но и все остальные элементы p, идущие за ol.

    Какими браузерами поддерживается:
  • Chrome
  • Firefox
  • Safari
  • Opera
a:link { color: green; } a:visited { color: grey; }

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

    Какими браузерами поддерживается:
  • Chrome
  • Firefox
  • Safari
  • Opera

10) X

a { color: red; }

CSS селектор по атрибуту . В этом примере выбираются только те ссылки, у которых есть атрибут title.

    Какими браузерами поддерживается:
  • Chrome
  • Firefox
  • Safari
  • Opera

11) X

a { color: yellow; }
    Какими браузерами поддерживается:
  • Chrome
  • Firefox
  • Safari
  • Opera

12) X

a { color: #dfc11f; }

Звездочка означает, что искомое значение должно быть где-нибудь в атрибуте (в любой части атрибута href). Таким образом, будут выбраны и ссылки с https://www..stijit.. Ко всем выбранным ссылкам будет применен золотой цвет.

    Какими браузерами поддерживается:
  • Chrome
  • Firefox
  • Safari
  • Opera

13) X

a { background: url(path/to/external/icon.png) no-repeat; padding-left: 15px; }

На некоторых сайтах рядом со ссылками, ведущими на другие сайты, проставлены небольшие иконки со стрелочками, чтобы показать что это внешние ссылки. Карат “^” – это символ для обозначения начала строки. Таким образом для выбора всех тэгов, у которых href начинается с http, нужно использовать CSS селектор с каратом, как это показано на примере выше.

    Какими браузерами поддерживается:
  • Chrome
  • Firefox
  • Safari
  • Opera

14) X

a { color: green; }

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

    Какими браузерами поддерживается:
  • Chrome
  • Firefox
  • Safari
  • Opera

15) X

a { color: green; }

Здесь мы применяем CSS селектор по пользовательскому атрибуту . Добавляем наш собственный атрибут data-filetype в каждую ссылку:

ссылка

Теперь, с помощью приведеного выше CSS селектора, можно выбирать все ссылки ведущие на картинки с любым расширением.

    Какими браузерами поддерживается:
  • Chrome
  • Firefox
  • Safari
  • Opera

16) X

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

ссылка

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

/* Выбрать элемент, атрибут data-info которого содержит значение external */ a { color: green; } /* Выбрать элемент, атрибут data-info которого содержит значение image */ a { border: 2px dashed black; }

    Какими браузерами поддерживается:
  • Chrome
  • Firefox
  • Safari
  • Opera

17) X:checked

input:checked { border: 3px outset black; }

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

    Какими браузерами поддерживается:
  • Chrome
  • Firefox
  • Safari
  • Opera

18) X:after

Псевдоклассы:before и:after очень полезные – они создают контент до и после выбранного элемента.

Clearfix:after { content: ""; display: block; clear: both; visibility: hidden; font-size: 0; height: 0; } .clearfix { *display: inline-block; _height: 1%; }

Здесь при помощи псевдо-класса:after после блока с классом.clearfix создается пустая строка, после чего очищается. Этот подход используется если невозможно применить свойство overflow: hidden .

    Какими браузерами поддерживается:
  • Chrome
  • Firefox
  • Safari
  • Opera

19) X:hover

div:hover { background-color: rgba(11,77,130,0.5); }

Применяет к элементу определенный стиль, когда на него наводится курсор мыши. Старые версии Internet Explorer применяют:hover только к ссылкам.

A:hover { border-bottom: 1px dotted blue; }

    Какими браузерами поддерживается:
  • IE6+ (В IE6 применимо только к ссылкам)
  • Chrome
  • Firefox
  • Safari
  • Opera

20) X:not(selector)

div:not(#content) { color: grey; }

Псевдокласс not (отрицания) бывает полезен когда, к примеру, нужно выбрать все div, за исключением того, который имеет id="content" .

По такому же принципу можно выбрать все элементы кроме p:

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

    Какими браузерами поддерживается:
  • Chrome
  • Firefox
  • Safari
  • Opera

21) X::pseudoElement

p::first-line { font-weight: bold; font-size: 24px; }

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

Выбор первой буквы параграфа:

P::first-letter { font-family: cursive; font-size: 30px; font-weight: bold; padding-right: 1px; }

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

P:first-line { font-size: 28px; font-weight: bold; }

    Какими браузерами поддерживается:
  • Chrome
  • Firefox
  • Safari
  • Opera

22) X:first-child

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

Псевдокласс first-child выбирает только первого потомка родительского элемента. Часто используется чтобы убрать border в первом элементе списка. Этот псевдокласс был еще начиная с CSS 1 .

    Какими браузерами поддерживается:
  • Chrome
  • Firefox
  • Safari
  • Opera 3.5+
  • Android

23) X:last-child

ul > li:last-child { border-bottom: none; }

Псевдокласс last-child выбирает последнего потомка родительского элемента. Он появился только начиная с CSS 3 .

    Какими браузерами поддерживается:
  • IE9+ (IE8 поддерживает first-child, но не last-child. Microsoft (с))
  • Chrome
  • Firefox
  • Safari
  • Opera 9.6+
  • Android

24) X:only-child

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

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

    Какими браузерами поддерживается:
  • Chrome
  • Firefox
  • Safari 3.0+
  • Opera 9.6+
  • Android

25) X:nth-child(n)

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

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

    Какими браузерами поддерживается:
  • Chrome
  • Firefox 3.6+
  • Safari 3.1+
  • Opera 9.6+
  • Android 2.1+
  • iOS 2.0+

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

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

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

    Какими браузерами поддерживается:
  • Chrome
  • Firefox 3.6+
  • Safari 3.1+
  • Opera 9.6+
  • Android 2.1+
  • iOS 2.0+

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

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

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

    Какими браузерами поддерживается:
  • Chrome
  • Firefox 3.6+
  • Safari 3.1+
  • Opera 9.6+
  • Android 2.1+
  • iOS 2.0+

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

ul:nth-last-of-type(3) { border: 2px ridge blue; }

Псевдокласс nth-last-of-type(n) предназначен для выбора n-ого элемента определенного типа с конца.

    Какими браузерами поддерживается:
  • Chrome
  • Firefox 3.6+
  • Safari 3.1+
  • Opera 9.6+
  • Android 2.1+
  • iOS 2.0+

29) X:only-of-type

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

Псевдокласс only-of-type выбирает элементы, не имеющие соседей в пределах родительского элемента. К примеру можно выбирать все ul, которые содержат только одинокие li.

    Какими браузерами поддерживается:
  • Chrome
  • Firefox 3.5+
  • Safari 3.1+
  • Opera 9.6+
  • Android 2.1+
  • iOS 2.0+

30) X:first-of-type

ul:first-of-type > li:nth-child(3) { font-style: italic; }

Псевдокласс first-of-type выбирает первый элемент заданного типа.

    Какими браузерами поддерживается:
  • Chrome
  • Firefox 3.5+
  • Safari 3.1+
  • Opera 9.5+
  • Android 2.1+
  • iOS 2.0+

Последнее обновление: 21.04.2016

Определение стиля начинается с селектора. Например:

Div{ width:50px; /* ширина */ height:50px; /* высота */ background-color:red; /* цвет фона */ margin: 10px; /* отступ от других элементов */ }

В данном случае селектором является div . Ряд селекторов наследуют название форматируемых элементов, например, div, p, h2 и т. д. При определении такого селектора его стиль будет применяться ко всем элементам соответствующих данному селектору. То есть выше определенный стиль будет применяться ко всем элементам

на веб-странице:

Селекторы CSS

Селекторы CSS

Здесь на странице 3 элемента div, и все они будут стилизованы:

Классы

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

Для определения селектора класса в CSS перед названием класса ставится точка:

RedBlock{ background-color:red; }

Название класса может быть произвольным. Например, в данном случае название класса - "redBlock". Однако при этом в имени класса разрешается использовать буквы, числа, дефисы и знаки подчеркивания, причем начинать название класса должно обязательно с буквы.

Также стоит учитывать регистр имен: названия "article" и "ARTICLE" будут представлять разные классы.

После определения класса мы можем его применить к элементу с помощью атрибута class . Например:

Определим и используем несколько классов:

Классы CSS

Классы CSS

Идентификаторы

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

Определение стилей для идентификаторов аналогично определению классов, только вместо точки ставится символ решетки #:

Идентификаторы CSS

Основное содержимое

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

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

Кроме селекторов тегов, классов и идентификаторов в css также есть так называемый универсальный селектор , который представляет знак звездочки (*). Он применяет стили ко всем элементам на html-странице:

*{ background-color: red; }

Стилизация группы селекторов

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

Селекторы CSS

CSS3

Селекторы

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

Некоторый текст...

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

H1, #header, .redBlock{ color: red; }