Все селекторы 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;}
|
| :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;} |
11.09.2019, 14:34 [1412 просмотров]