БлогNot. Все селекторы CSS3

Все селекторы CSS3

Табличка, очень кратко по всем селекторам, псевдоклассам и псевдоэлементам. Сама табличка сделана "по старинке", с атрибутами тега <table> и отдельных ячеек.

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

СелекторыТип селектораОписание и пример
Простые селекторы и комбинаторы
* Универсальный селектор Подходит для любого элемента
* {font-family: serif;}
A Селектор типа элемента Подходит для имени элемента
div {font-style: italic;}
A, Б Селектор группы Подходит для элементов A и Б
h1, h2, h3 {color: blue;}
A Б Селектор-потомок Подходит к элементу Б, только если он потомок элемента A.
blockquote em {color: red;}
A>Б Селектор-ребенок Подходит любому элементу Б, который является прямым потомком элемента A.
div.main>p { line-height: 1.5; }
A+Б Селектор смежных элементов одного уровня Подходит любому элементу Б, который немедленно следует за любым элементом А, если А и Б являются потомками одного и того же элемента
p+ul { margin-top: 0; }
А~Б Обобщенный селектор одного уровня Подходит любому элементу В, перед которым находится элемент А, если А и В являются потомками одного и того же элемента
blockquote~cite {margin-top: 0;}
Селекторы класса и идентификатора
.classname
A.classname
Селектор класса Подходит значению атрибута класса всех элементов или конкретного элемента.
p.credits { font-size: 80%; }
#idname
A#idname
Селектор идентификатора Подходит значению атрибута идентификатора элемента.
#intro {font-weight: bold;}
Селекторы атрибутов
A[att] Простой селектор атрибутов Подходит любому элементу A с заданным определенным атрибутом вне зависимости от его значения.
table[border] {background: white;}
A[att="val"] Селектор точного значения атрибута Подходит любому элементу A, у которого есть указанный атрибут с указанным значением.
table[border="3"] {background: yellow;}
A[att~="val"] Селектор частичного значения атрибута Подходит любому элементу А, у которого есть указанное значение в качестве одного из значений в списке, заданного для указанного атрибута.
table[class~="example"] {background: yellow;}
A[att|="val"] Селектор атрибута, пишущегося через дефис префикса Подходит любому элементу А, у которого есть указанный атрибут со значением, которое равно или начинается с предоставленного значения. Чаще всего используется для выбора языков, как показано здесь.
a[lang|="en"] {background-image: url(en_icon.png);}
A[att^="val"] Селектор атрибута значения начала подстроки Подходит любому элементу А, имеющему определенный атрибут, значение которого начинается в приведенной строке.
img[src^="/images/icons"] {border: 3px solid;}
A[att$="val"] Селектор атрибута значения конца подстроки Подходит любому элементу А, имеющему определенный атрибут, значением которого заканчивается приведенная строка.
img[src$="/images/icons"] {border: 3px solid;}
A[att*="val"] Селектор атрибута произвольного значения подстроки Подходит любому элементу А, имеющему определенный атрибут, в значении которого содержится приведенная строка.
img[title#="July"] {border: 3px solid;}
Селекторы псевдокласса
a:link Якорный селектор псевдокласса Определяет стиль ссылок, которые еще не посетили.
a:link {color: maroon;}
a:visited Якорный селектор псевдокласса Определяет стиль ссылок, которые уже посетили.
a:visited {color: gray;}
:active Селектор псевдокласса действий пользователя Выбирает любой элемент, который уже был активирован пользователем, например ссылка, на которую уже нажали.
a:active {color: red;}
:focus Селектор псевдокласса действий пользователя Выбирает любой элемент, который на данный момент находится в фокусе ввода, например ввод в выбранную форму.
input[type="text"]:focus {background: yellow;}
:hover Селектор псевдокласса действий пользователя Определяет стиль для элементов (обычно ссылок), который появляется, когда на них наводят указатель мыши.
a:hover {text-decoration: underline;}
h1:target {color: red;}
:lang(xx) Селектор псевдокласса Выбирает элемент, который подходит для двухсимвольного языкового кода.
a:lang(de) {color: green;}
:root Селектор структурного псевдокласса Выбирает элемент, являющийся корневым в документе. В HTML это элемент html.
:root { background: papayawhip;}
:nth-child() Селектор структурного псевдокласса Выбирает элемент, являющийся n-м потомком родительского элемента. Обозначение может содержать число, выражение или зарезервированное слово odd или even.
tr:nth-child(odd) { background: #DDD;}
:nth-last-child() Селектор структурного псевдокласса Выбирает элемент, являющийся n-м потомком родительского элемента, если считать с последнего.
li:nth-last-child(2) { color: green;}
:nth-of-type() Селектор структурного псевдокласса Выбирает n-й элемент своего типа.
img:nth-of-type(even) {float: right;}
:nth-last-of-type() Селектор структурного псевдокласса Выбирает n-й элемент своего типа, если считать с последнего.
img:nth-last-of-type(odd) {float: right;}
:first-child Селектор структурного псевдокласса Выбирает элемент, являющийся первым потомком своего родительского элемента в потоке исходного документа.
p:first-child {border-top: 1px solid;}
:last-child Селектор структурного псевдокласса Выбирает элемент, являющийся последним потомком своего родительского элемента.
p:last-child {border-bottom: 1px solid;}
:first-of-type Селектор структурного псевдокласса Выбирает элемент, являющийся первым смежным элементом данного типа.
dt:first-of-type {font-weight: bold;}
:last-of-type Селектор структурного псевдокласса Выбирает элемент, являющийся последним из смежных элементов данного типа.
li:last-of-type {margin-bottom: 1em;}
:only-child Селектор структурного псевдокласса Выбирает элемент, являющийся единственным потомком данного родителя.
aside:only-child {line-height: 1.5;}
:only-of-type Селектор структурного псевдокласса Выбирает элемент, являющийся единственным смежным элементом данного типа.
dt:only-of-type {font-weight: bold;}
:empty Селектор структурного псевдокласса Выбирает элемент, в котором нет текста и у которого нет дочерних элементов.
tbody td:empty {background: #000; }
:enabled Селектор псевдокласса пользовательского интерфейса Выбирает элемент пользовательского интерфейса, если тот активен.
input[type="tel"]:enabled {border: 1px solid red;}
:disabled Селектор псевдокласса пользовательского интерфейса Выбирает элемент пользовательского интерфейса, если тот не активен.
input[type="tel"]:disabled {color: #ccc;}
:checked Селектор псевдокласса пользовательского интерфейса Выбирает элемент пользовательского интерфейса (переключатель или флажок), который находятся в положении "включено".
:checked {background-color: yellow;}
:not(X) Отрицательный селектор псевдокласса Выбирает элемент, который не соответствует простому селектору X.
:not(pre) { line-height: 1.2 }
Селекторы псевдоэлементов
:first-letter (::first-letter в CSS3) Селектор псевдоэлемента Выбирает первую букву указанного элемента.
p:first-letter {font-size: 4em;}
:first-line (::first-line в CSS3) Селектор псевдоэлемента Выбирает первую букву указанного элемента.
blockquote: first-line {letter-spacing: 4px;}
:before (::before в CSS3) Селектор псевдоэлемента Вставляет сгенерированный текст в начале указанного элемента и применяет к нему стиль.
p.intro:before {content: "start here"; color: gray;}
:after (::after в CSS3) Селектор псевдоэлемента Вставляет сгенерированный контент в конец указанного элемента и применяет к нему стиль.
p.intro:after {content: "fini"; color: gray;}


теги: памятка css форматы список

11.09.2019, 14:34; рейтинг: 50