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

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

* { margin: 0; padding: 0; }

Но символ "*" можно использовать в составных селекторах.

Ul * {color: red}

Этот код назначает красный цвет тексту всех потомков элемента

.

Классы

Классы в CSS - самый расрпостранённый способ назначения стиля группе элементов. Класс применяют когда нужно задать разные стили элементам html-документа, созданным одним тегом. Синтаксис класса:

Тег.Имя класса

В селекторе стиля вначале пишется нужный тег, затем, через точку указывается имя класса. Имя класса должно начинаться с латинской буквы и может содержать в себе символы дефиса (-) и подчеркивания (_).

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

, этим трём меню нужно создать три различных стиля. В CSS создают три класса ul.menu-top , ul.menu и ul.menu-bottom .

В теле html-документа различные меню создаются с указанием класса в атрибуте class :

class ="menu-top "> ...


class ="menu "> ...


class ="menu-bottom "> ...

Классы - часто используемы инструмент CSS. Он удобен и, кроме того, делает код стиля более читаемым.

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

*.Имя класса { свойство1 : значение ; свойство2 : значение ; ... }

Эту запись можно сократить, убрав символ "*".

Имя класса { свойство1 : значение ; свойство2 : значение ; ... }

ID селекторы (идентификаторы)

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

При описании идентификатора вначале указывается символ решётки (#), затем идет имя идентификатора.

#Имя идентификатора { свойство1 : значение ; свойство2 : значение ; ... }

Также, как и имя класса, имя идентификатора должно начинаться с латинской буквы и может содержать в себе символы дефиса (-) и подчеркивания (_).

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

В HTML есть ряд тегов, которые в зависимости от атрибутов меняют своё действие. Например, тег зависимости от значения атрибута type может создавать поле формы, кнопку и другие элементы формы. Так что, если применять стиль к селектору input , то он изменит все элементы формы, созданные этим тегом. Для точного управления такими элементами в CSS существуют селекторы атрибутов.

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

Селекторы атрибутов - тема отдельной большой статьи. В рамках этой статьи мы лишь отметим, что они есть.

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

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

При помощи псевдоклассов создаются динамические эффекты на странице.

Синтаксис псевдокласса:

Селектор:псевдокласс { свойство1 : значение ; свойство2 : значение ; ... }

Можно применять псевдоклассы к селекторам идентификаторов или классов (ul.menu:hover {color : green }).

Для новичков отмечу: если именам классов и идентификатов разработчик придумывает названия сам, то имена псевдоклассов в CSS - это зарезервированные слова.

Псевдокласс :active выполняет правило стиля, если элемент активен. Например, на ссылку наведён курсор и произведён клик. Псевдокласс :hover - курсор мыши просто наведён на элемент, например на ссылку.

Есть ещё много псевдоклассов. Полностью раскрыть тему псевдоклассов можно в рамках отдельной статьи. Тут мы коснулись её лишь поверхностно.

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

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

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

Синтаксис псевдоэлементов такой же, как и у псевдоклассов:

Селектор:псевдоэлемент { свойство1 : значение ; свойство2 : значение ; ... }

Что такое селектор в 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-правило.

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

Селекторы по элементу Этот базовый селектор выбирает элементы, к которым будет применяться правило.
Синтаксис: элемент
Пример: селектор input выберет все элементы используется для создания интерактивных элементов управления в веб-формах."> . Селекторы по классу Этот базовый селектор выбирает элементы, основываясь на значении их атрибута class .
Синтаксис: .имяКласса
Пример: селектор .index выберет все элементы с соответствующим классом (который был определен в атрибуте class="index" или похожем). Селекторы по идентификатору Этот базовый селектор выбирает элементы, основываясь на значении их id атрибута. Не забывайте, что идентификатор должен быть уникальным, т. е. использоваться только для одного элемента в HTML-документе.
Синтаксис: #имяИдентификатора
Пример: селектор #toc выберет элемент с идентификатором toc (который был определен в атрибуте id="toc" или похожем). Универсальный селектор Этот базовый селектор выбирает все элементы. Он также существует в варианте для локального и глобального пространств имен.
Syntax: * ns|* *|*
Example: селектор * выберет все элементы. Селекторы по атрибуту Этот базовый селектор выбирает элементы, основываясь на одном из их атрибутов и/или его значении.
Синтаксис:
Пример: селектор выберет все элементы с атрибутом autoplay (независимо от его значения).

Комбинаторы

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

внутри одного родителя. Дочерние селекторы Комбинатор ">" выбирает элементы, которые являются дочерними непосредственно по отношению к указанному элементу.
Синтаксис: A > B
Пример: селектор ul > li выберет все элементы , которые находятся внутри элемента

. Вложенные селекторы Комбинатор " " выбирает элементы, которые находятся внутри указанного элемента (вне зависимости от уровня вложенности).
Синтаксис: A B
Пример: селектор div span выберет все элементы , которые находятся внутри элемента ) является базовым контейнером для элементов основного потока (flow content). Он не влияет на контент или формат пока не стилизован, используя CSS. Являясь "> по своему существу не представляет ничего. Между тем, он используется для группировки контента, что позволяет легко его стилизовать, используя ">
.

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

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

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

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

Спецификации

Спецификация	Статус

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


CSS Selectors

Объясняю многие селекторы применимо к указанному примеру.

.class

(Пр. .main) Данный селектор объединяет все элементы с классом «main». Родился он давно и активно учувствует в разработке.

#id

(Пр. #Block_Form) Этот селектор объедение элементы с id=«Block_Form» В чем скажите разница между.class и #id - а разницу можно понять на примере: то что ПАСПОРТНЫЙ НОМЕР = id, ФАМИЛИЯ = class. Также немало важно то, что - Идентификатор (id) можно вызвать из скрипта используя функцию GetElementById, в отличие от класса.
Класс может быть использован многократно, идентификатор же должен быть уникальным.

*

Выбирает, объединяет все элементы
(Пр. *) { background-color:yellow; })

element

(Пр. p) Объединяет все элементы тега p.

element,element

(Пр. div,p) Объединяет все элементы div и все элементы p
.
Так же в эту группу можно выделить похожие селекторы:

element element

(Пр. div p) Выбирает все элементы p внутри div.

element>element

(Пр. div>p) Объединяет все p для которых родителем выступает div.

element+element

(Пр. div+p) Объединяет все p которые расположены сразу после div.

(Пр. ) Объединяет все элементы с атрибутом target

(Пр. ) Объединяет все элементы с заданным target="_blank"

(Пр. ) Объединяет все элементы, которые в своем title содержат «Apple»

(Пр. ) Объединяет все элементы с атрибутом class начиння с «top»

Все теги написаны были без "<>".

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

Так же их называют Псевдокласы:

:link

(Пр. a:link) Объединяет все ссылки, которые еще не посещались (Пр. a:visited) Объединяет все ссылки, которые пользователь уже успел посетить

:active

(Пр. a:active) Псевдокласс:active определяет стиль для активной ссылки. Активной ссылка становится при нажатии на нее.

:hover

(Пр. a:hover) Когда проводишь мышкой, ссылка может менять стиль

:focus

(Пр. input:focus) Изменяет стиль при фокусировке. на практике часто используется для подсветки полей формы при фокусировке на нем

:first-letter

(Пр. p:first-letter) Определяет стиль для первого символа в тексте элемента

:first-line

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

:first-child

(Пр. p:first-child) Что бы просто объяснить - применяет стилевое оформление к первому дочернему элементу своего родителя. В примере если р есть первым элементом своего родителя
Дальше идут два очень интересных класса:

:before

(Пр. p:before)

:after

(Пр. p:after)
Они применяются в тех случаях, когда - нужно отобразить нужный контент до или после содержимого элемента, к которому он добавляется. Работает совместно со свойством content:. Так же я их использую как дополнительные элементы вместо div, в таком случае нужно прописывать content:"";. Также нужно помнить о том, что при добавлении:before к блочному элементу, значение свойства display может быть только: block, inline, none, list-item. Все остальные значения будут трактоваться как block. При добавлении:before к встроенному элементу, display ограничен значениями inline и none. Все остальные будут восприниматься как inline.
:before наследует стиль от элемента, к которому он добавляется.

:lang(language)

(Пр. p:lang(it)) Довольно простой, но порой нужный элемент - для примера: Определяет стиль каждого p с атрибутом lang, значение которого начинается с «it»

Селекторы CSS3

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

element1~element2

(Пр. p~ul)
p~ul { background:red; } Устанавливает цвет фона для всех ul элементов, которые предшествуют p с таким же родителем. Грубо говоря - на этом примере, красным будет бэкграунд только у тех «списков» которые стоят после родителя тега р.


A div element.

• Item
• Item
• Item

- в этом случае ничего не произойдет, а в

• Item
• Item
• Item


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

(Пр. a) По примеру определяет стиль каждого a для которого значение элемента src начинающегося с «https». Вот еще пример:


item1

item2

item3

Item4


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

(Пр. a) Выбирает каждый тег a, для которого SRC значение атрибута заканчивается на ". PDF. И вот еще один наглядный пример:


Item1

Item2

Item3

Item4


На этом примере очень хорошо будет видно использование данного селектора, а именно в Красный цвет перекрасятся Item1 (по тому что класс заканчивается на _test) и item3.

(Пр. a) Выбирает каждый тег a, для которого значение атрибута SRC содержит подстроку «w3schools».


item1

item2

item3

Item4


В этом примере результатом будут закрашенные строки item1, item3, item4.

:first-of-type

(Пр. p:first-of-type) Задает правила стилей для первого элемента в списке дочерних элементов своего родителя.

:last-of-type

(Пр. p:last-of-type) Соответственно задает правила стилей для последнего элемента в списке дочерних элементов своего родителя.

:only-of-type

(Пр. p:only-of-type) А вот этот применяется к дочернему элементу указанного типа, только если он единственный у родителя. Аналогично как:first-of-type:last-of-type или:nth-of-type(1):nth-last-of-type(1).

:only-child

(Пр. p:only-child) Такой элемент применяется по примеру к дочернему элементу p, только если он единственный у родителя

Следующие два можно также неплохо использовать для определенной последовательности – нечетные (odd), четные(even) или число(1,2,3… или выражения 2n+1), заданные в (Х):

:nth-child(n)

(Пр. p:nth-child(2)) Для каждого

Который является вторым дочерним элементом у родителя.


:nth-last-child(n)

(Пр. p:nth-last-child(2)) Тот же смысл, что и у предыдущего, кроме того, что отсчет ведется не от первого элемента, а от последнего.

:nth-of-type(n)

(Пр. p:nth-of-type(2)) Используется для добавления стиля к элементам указанного типа на основе нумерации. Например, для картинок у заглавия применить со значением Float: -left or –right.

:nth-last-of-type(n)

(Пр. p:nth-last-of-type(2)) Тоже, что и предыдущий, но отсчет ведется не от первого элемента, а от последнего.

:last-child

(Пр. p:last-child) Данный селектор задает стилевое оформление последнего элемента своего родителя.

Также стоит выделить:

:root

(Пр. :root) Такой селектор определяет корневой элемент документа, иначе говоря - .

:empty

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

:target

(Пр.#news:target) Грубо говоря – это определение на основе целевого элемента. В примере определение текущего id - #news element. Используется для URL.

:enabled

(Пр. input:enabled) Применяется к формам, как доступ к доступным (не заблокированным - disabled) элементам форм, простите за тавтологию.

:disabled

(Пр. input:disabled) Иначе говоря – применимо к стилю заблокированных элементов формы.

:checked

(Пр. input:checked) Данный псевдокласс применим к элементам интерфейса, таким как переключатели (checkbox) и флаги (radio), когда они включены, конечно же.

:not(selector)

(Пр. :not(p)) На примере стиль применяется ко всем элементам, которые не p. В качестве селектора могут быть псевдоклассы, теги, идентификаторы, классы и селекторы атрибутов.

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

Селекторы в CSS

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

P{ стили… }

В данном случае селектором выступает p – тег абзацев. Такое правило добавит стили для всех абзацев на веб-странице.

Какими бывают css селекторы?

Селектор тега – самый простой . Он был продемонстрирован в примере. Чтобы записать его в css, нужно написать имя тега без угловых скобок. Стили будут применены ко всем элементам с таким тегом.
table{} – стили для всех таблиц
li{} – стили для всех пунктов списка
a{} – стили для всех ссылок

Стилевой класс – к любому элементу на веб-странице можно привязать стилевой класс. Даже к одной букве. Потом в css-файле можно обратиться к этому элементу, прописав для него собственные стили. Для этого нужно поставить точку и написать имя стилевого класса после нее. Примеры:
.about{} – правила применятся ко всем элементам, которые имеют атрибут class = "about"
.down{} – правила применятся ко всем элементам, которые имеют атрибут class = "down"
.float{} – правила применятся ко всем элементам, которые имеют атрибут class = "float"

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

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

Задается он так:

Абзац

То есть также, как и класс, только используется атрибут id в качестве значения которого используется любое слово.

Чтобы обратиться к элементу с идентификатором через css нужно написать значение id и перед ним поставить решетку.

#first{ font-size: 22px }

Мы обратились к абзацу с id = first . Стиль применится только к нему. У остальных абзацев размер шрифта не изменится.

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

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

Псвевдокласс – это стилевой класс элемента, который мы на самом деле не задавали сами, просто он есть сам по себе. Например, увидев в html такой код:

Абзац

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

Для ссылок

Для полей ввода и ссылок

:focus – стиль применяется к элементу, который получает фокус ввода.
На самом деле для полей ввода появилось очень много новых классных псевдоклассов, но все они впервые введены в CSS3 , а в этой статье я хотел бы обсудить только самые простые. О CSS3 селекторах обязательно будет статья в дальнейшем.

Для всех элементов

1. :hover – стиль применяется при наведении на элемент
2. :first-child – выбрать первый дочерний элемент
3. :last-child – последний дочерний элемент
4. :nth-child() – в скобках записывается число или формула, которая определяет, какие элементы будут выбраны.
5. :first-of-type, :last-of-type, :nth-of-type() – работают практически аналогично предыдущим псевдоклассам. Разница только в том, что здесь учитывается тип элемента. Разницу можно почувствовать на примере:
   li:first-child – будет выбран первый пункт списка, но только в том случае, если в родительском блоке элемент li идет первым. Если до него стоит другой тег, не выберется ничего.
6. li:first-of-type – будет выбран первый пункт списка из всех, что есть в родителе. При этом не важно, где они располагаются в коде. Надеюсь, разница понятна.
7. :nth-last-child – работает аналогично:nth-child, но отсчет ведется от последнего элемента, а не от первого.
8. :nth-last-of-type – аналогично:nth-last-child, но с учетом типа элемента.

Это не все псевдоклассы, но самые популярные и необходимые. Собственно, все псевдоклассы помечаются в css одинаково, через двоеточие. К тому же можно комбинировать селекторы и получать интересные возможности:
a:visited:active – стили для уже посещенной ссылки, на которую кликают.
div:first-child:hover – стили для всех первых блоков в их родителях, на которые наводят курсор.

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

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

Еще одно важное правило, о котором нужно знать. Селекторы стилевых классов можно записать, не отделяя их друг от друга. Например:
.class1.class2 – выберет те элементы, у которых есть оба этих класса.
.class1.class3.class8 – выберет элементы, к которым привязаны все три стилевых класса.

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

Если отделять селекторы друг от друга пробелами, то можно оттянутся до нужного нам элемента. Примеры:
table td – выберет все ячейки, лежащие в таблицах
ul li a – выберет все ссылки, лежащие в пунктах списков (а пункты списков в свою очередь лежат в самих списках)
.class1 p – выберет все абзацы с атрибутом class = “class1”
.class2 p span – выберет все содержимое тегов, лежащее в абзацах с классом class2.

Вкладывать и комбинировать таким образом можно сколько угодно раз. Примеры:
#header .logo span:first-letter{} – выберет первую букву в спане логотипа, который расположен в шапке
.class1.class2:hover{} – определит стиль при наведении мышки для элементов, которые имеют оба стилевых класса.

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

Если вам нужно задать стили для элементов родителя, которые являются НАПРЯМУЮ дочерними , то нужно прописать это так:
ul > li{} – выберет пункты списка, которые вложены в него напрямую, а не лежат в других тегах
p > a{} – выберет только те ссылки в абзацах, которые лежат непосредственно в них, а не вложены в другие теги (которые, в свою очередь, уже вложены в абзацы)
Пример:

Если прописать такой селектор p > a , то применятся ли стили к ссылке в вышеприведенном примере? Нет, потому что она еще вложена в другой тег, то есть не является напрямую дочерней.

Соседние селекторы

Последнее, что мы сегодня рассмотрим. Если прописать в css так:
.class1 + .class4 {} , то этот селектор выберет элемент с атрибутом class = "class4" , и этот элемент должен стоять в HTML-коде сразу же за элементом с классом class1. Только в этом случае все будет работать. Опять же рассмотрим на примере:

Сработает ли вышеуказанный селектор (.class1 + .class4 {})? Нет, потому что элементы не стоят рядом. Между ними находится тег img . Вот если его удалить, тогда все заработает.

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

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

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

Селекторы атрибутов, это те селекторы, в которых в квадратных скобках записывается атрибут, либо атрибут со значением. Несколько примеров, чтобы было понятно:
* – выбирает все элементы, которые имеют атрибут href с любым значением.
input – выбирает все input-элементы, у которых есть атрибут disable (все отключенные поля).
input – выбирает все поля, тип которых password , то есть поля для ввода пароля.
img – выбирает картинку, у которой задан атрибут src = "/logo.png" .

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

Продвинутые css селекторы атрибутов

Все нижеперечисленные селекторы чувствительны к регистру.
Поиск в начале строки
div – выбирает все div-ы, у которых есть стилевой класс, начинающийся на "block" . Таким образом, будут выбраны, например, такие блоки: "block-head", "block-3", "blocknote" . Главное, чтобы в начале значения было ключевое слово.

Поиск в конце строки
a – выбирает все ссылки, у которых адрес заканчивается на.rar . Таким образом, если у вас на сайте можно что-то скачать, то вы можете добавить иконку рядом со всеми ссылками на архивные файлы.

Поиск подстроки везде в значении
span – выберет все теги span, у которых в имени класса в любом месте этого имени содержится “art”. Таким образом, будут выбраны, например, спаны с такими классами: party, clart, art-1.

Поиск префиксов
p – выберет абзацы со стилевым классом, которые имеют имя, либо точно совпадающее с “first”, либо содержащие префикс first- , с которого начинается имя класса.

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

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

Для чего могут пригодиться селекторы атрибутов

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

Реализовать это можно так:

A {css-правила}

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

Css3 селекторы и псевдоклассы

О новых css3 селекторах, о которых не писал в прошлых статьях.

Улучшение работы с формами

Это новые псевдоклассы. В основном все они касаются новых возможностей форм.
:enabled – псевдокласс выберет все активные поля. То есть те, в которые можно что-то записать или они хотя бы доступны для чтения.
:disabled – противоположный псевдокласс, выбирает все заблокированные поля. Соответственно, с его помощью вы можете добавить дополнительные стили таким полям.
:read-only – выбор всех input , которые доступны только для чтения.
:read-write – выбираются все поля, которые доступны для редактирования.

Добавление стилей с учетом валидности

Также появились очень интересные псевдоклассы, с помощью которых вы можете назначить стили в зависимости от валидности или невалидности введенного значения. Раньше это можно было сделать только с помощью JavaScript .
:valid – выбирает все поля, введенное значение в которых удовлетворяет требованиям. Сами требования обычно задают с помощью атрибута pattern. Также может зависеть от типа поля. Например, поле, в котором пишется адрес электронной почты, будет считаться невалидным, если во введенном значении нет @ .
:invalid – соответственно, выбирает все невалидные поля, в которых значение не соответствует тому, что ожидается. Например, вы можете сделать цвет текста в таких полях красным:

Input:invalid{ color: red; }

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

Стили для обязательных полей

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

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

:not является своего рода антиселектором, который позволяет определить, к каким элементам НЕ ПРИМЕНЯТЬ стили. Пару примеров.
a:not(:last-child){} – выберет все ссылки на странице, кроме последней.
.nav:not(li){} – выберет все элементы с классом nav , но это не должны быть пункты списка (li).
#article p:not(.special:first-child) – выберет все абзацы в блоке article , кроме первого абзаца с классом special.

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

Вот такой вот нужный иногда псевдокласс, он нужен не только в теории, но и на практике. Ах да, еще же вы можете продолжить составление селектора после:not (). Например:
div:not(#header) .wrap – выбирает все дивы c классом wrap , кроме дива с id="header"

Это были селекторы, которые появились в CSS3.

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

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

Класс является более приоритетным селектором, чем селектор тега (p, table, ul). Псевдокласс имеет такой же вес, что и простой класс. p:first-line приоритетнее, чем.firstline , потому что во втором селекторе просто класс, а в первом — селектор тега + псевдокласс.

Еще одно полезное правило — чем конкретнее селектор, тем более приоритетными являются стили для него. Например, между body и p битву выигрывает абзац, поскольку это более конкретный селектор, чем body (потому что это вся страница, то есть не очень конкретно). А table p , в свою очередь, конкретнее, чем просто p . В общем, просто знайте о таких правилах.

Итог

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