Описание

Родственные селекторы по своему поведению похожи на соседние селекторы (запись вида 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

Показать картинки

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

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

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

Селектор типа

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

• p

  (параграф).

• table - сообщает браузеру, что необходимо отформатировать все HTML теги (таблица).
  li - сообщает браузеру, что необходимо отформатировать все HTML теги
  (элемент списка).

  Давайте рассмотрим пример, в котором с использованием селектора типа мы стилизуем все заголовки второго уровня (

  ):

  Обычный заголовок второго уровня

  Результат нашего примера:

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

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

  
  
  Рис. 4 Селектор класса в CSS.

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

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

  .test { /* имя класса в таблице стилей задается через точку */ text-align : center ; font-family : Courier ; color : green ; /* задаем цвет текста*/ margin-top : 50px ; /* добавляем отступ от верхнего края элемента */ }

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

  class = "test" > Заголовок второго уровня

  /* задаем класс для элемента*/

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

  • в отличии от селекторов типа все названия селекторов класса должны начинаться с точки (благодаря ей браузеры находят эти селекторы в таблице стилей). Точка требуется только в названии селектора таблицы стилей (в значении глобального HTML атрибута class она не ставится, ).
  • название после точки всегда должно начинаться с символа (неправильно: .50cent , .-vottakvot ).
  • Учитывайте регистр при наименовании стилевых классов, т.к. они к этому чувствительны и очень ранимы (.vottakvot и .VotTakVot разные классы).

  Обычный заголовок второго уровня

  Заголовок с заданным классом

  Результат нашего примера:

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

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

  Обычный заголовок class = "test" > второго уровня

  Результат нашего примера:

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

  a.test { /* выбирает все элементы с классом test */ блок объявлений ; } p.intro { /* выбирает все элементы

  С классом intro */ блок объявлений ; }

  ID селекторы

  
  
  Рис. 7 Селектор id в CSS.

  Основная задача селектора id заключается в том, чтобы выбрать элемент с определённым идентификатором. Для начала необходимо создать идентификатор, назначив ему имя, которое нам необходимо придумать самостоятельно:

  #test { /* имя идентификатора в таблице стилей задается через решетку */ background-color : #00FF00 ; /*Задаём цвет заднего фона*/ color : white ; /*Задаём цвет шрифта белый*/ font-size : 30px ; /*Указываем размер шрифта*/ width : 600px ; /*Указываем ширину элемента*/ height : 40px ; /*Указываем высоту элемента*/ text-align : center ; /*Выравниваем текст по центру внутри элемента*/ }

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

  id = "test" > Обычный заголовок второго уровня

  Обратите внимание на следующие правила, которые необходимо соблюдать при работе с id селекторами:

  • значение идентификатора должно быть уникально на странице, размещение нескольких одноименных идентификаторов на странице считается ошибкой (выборка остановится на первом идентифакторе).
  • все названия id селекторов должны начинаться с решётки (благодаря ей браузеры находят эти селекторы в таблице стилей). Решетка требуется только в названии селектора таблицы стилей (в значении глобального HTML атрибута она не ставится, будьте внимательны из-за этого возникает много ошибок ).
  • используйте только буквы алфавита (A-Z, a-z), числа, дефисы, знаки подчеркивания.
  • название после решётки всегда должно начинаться с символа (неправильно: #50cent , #-vottakvot ).
  • Учитывайте регистр при наименовании id селекторов, т.к. они к этому чувствительны (#vottakvot и #VotTakVot разные идентификаторы).

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

  Обычный заголовок второго уровня

  Результат нашего примера:

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

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

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

  Например:

  Первым групповым селектором мы указываем, что заголовки

  и

  , элементы с классом test и элемент с идентификатором test получат цвет заднего фона зеленый .

  Вторым групповым селектором мы указываем, что кроме заднего фона элементы с классами test и элемент с идентификатором test получат синий цвет текста.

  Рассмотрим следующий пример:

  Заголовок первого уровня

  Заголовок второго уровня

  class = "test" > Абзац с классом test

  Заголовок третьего уровня

  id = "test" > Абзац с идентификатором test

  Заголовок четвертого уровня

  В этом примере мы использовали три групповых селектора:

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

  Давайте рассмотрим пример использования:

  Заголовок первого уровня

  Заголовок второго уровня

  Абзац, который не несет никакой смысловой нагрузки

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

  Результат нашего примера:

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

  .test * { /* выбирает все элементы внутри элемента c назначенным классом test */ объявление ; } #test * { /* выбирает все элементы внутри элемента c назначенным идентификатором test */ объявление ; } div * { /* выбирает все элементы внутри элемента

  */ объявление ; }

  Вопросы и задачи по теме

  Перед тем как перейти к изучению следующей темы пройдите практическое задание:

  
  

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

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

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

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

  

  • Ссылка 1
  • Ссылка 2
  • Ссылка 3
  • Ссылка 4

  Селектор 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+

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

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

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

  • селектор типа
  • универсальный селектор
  • селекторы атрибутов
  • селектор идентификатора
  • селектор класса
  • псевдо-классы

  CSS селектор	Пример	Описание	CSS
  .class	.myClass	Выбирает все элементы с классом myClass (class="myClass").	1
  #id	#main	Выбирает элемент с идентификатором main (id="main").	1
  	*	Выбор всех элементов.	2
  элемент	span	Выбор всех элементов .	1
  элемент,элемент	div,span	Выбор всех элементов и всех элементов .	1
  [атрибут]		Выбирает все элементы с атрибутом title .	2
  [атрибут="значение"]		Выбирает все элементы с атрибутом title , значение которого в точности совпадает со значением указанным в селекторе (title="cost").	2
  [атрибут~="значение"]		Выбирает все элементы с атрибутом title , в значении которого (в любом месте) встречается подстрока (в виде отдельного слова) "один" (title="один и два").	2
  [атрибут|="значение"]		Выбор всех элементов с атрибутом lang , значение которого начинается с "ru".	2
  [атрибут^="значение"]	a	Выбор каждого элемента с атрибутом href , значение которого начинается с "https".	3
  [атрибут$="значение"]		Выбирает все элементы с атрибутом src , значение которого оканчивается на ".png" (src="some_img.png").	3
  [атрибут*="значение"]		Выбирает все элементы с атрибутом title , в значении которого (в любом месте) встречается подстрока (в виде отдельного слова или его части) "один" (title="один и два").	3

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

  Span.className p.className1.className2#someId:hover

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

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

  Комбинаторы

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

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

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

  Псевдо-класс	Пример	Описание	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
  	3
  :not(селектор)	:not(p)	Выбор всех элементов, кроме элемента .	3

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

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