В этой записи-шпаргалке описаны интересные CSS селекторы, псевдоклассы и псевдоэлементы, которые могут значительно облегчить работу в описании стилей тех или иных элементов страницы.
CSS селекторы:
Селектор - это инструкция в наборе правил, которая указывает браузеру какой элемент выбрать для применения к нему стиля.
X:
Селектор тега, описывает стиль к тегам X.
a {color: green; }
Все ссылки окрасятся в зеленый цвет.
.X
Селектор класса, описывает стиль к классу X.
.elims-class { color:green; }
Все элементы класса "elims-class" окрасятся в зеленый цвет.
.X.Y
Селектор мультикласса, описывает стиль элементов, которые одновременно принадлежат к классу X и Y.
elims-class1.elims-class2 { color:green; }
Все абзацы <p class="elims-class1 elims-class2 ..."> будут окрашены в зеленый цвет.
#X
Селектор идентификатора, описывает стиль элементов с id "elims-id". На странице может быть только один элемент с таким id, в отличии от класса.
#elims-id { width: 640px;}
*
* { margin: 0; padding: 0; }
Описывает стиль каждого элемента. Часто используется для обнуления всех элементов. Этот селектор нагружает браузер.
X Y
Селектор вложенности, описывает стиль элементов Y находящихся где-то внутри элемента X, независимо от глубины вложенности.
li a {color:red;}
Ссылки которые находятся в li-элементе будут окрашены в красный цвет
X *
Описывает стиль всех дочерних элементов X.
#elims-id * { padding-top: 10px ; }
X > Y
Дочерний селектор, описывает стиль элемента Y, который находиться где-то внутри элемента X на первом уровне вложенности.
div#elims-id > a {color:red;}
Ссылки находящиеся в div с id "elims-id" будут окрашены в красный цвет
X+Y
Селектор соседства, описывает стиль первого элемента Y, который идет сразу за X.
b + a {color: green}
Ссылки, которые идут после жирного текста буду окрашены в зеленый цвет.
X ~ Y
Селектор родственности, похож на селектор соседства, только описывает стиль не первого элемента Y который должен идти сразу за X, а всех элементов Y, которые идут за X и имеют одного и того же родителя.
div.elims-class ~ a {color: green}
X[Y]
Селектор атрибута, описывает стиль всех элементов X, у которых есть атрибут Y.
a[title] { color: red; }
Все ссылки имеющие атрибут title окрасятся в красный цвет.
X[Y="Z"]
Описывает стиль всех элементов X, имеющих атрибут Y, с точным значением Z.
a[href="https://elims.org.ua"] { color: black; }
Все ссылки ведущие на главную elims.org.ua будут черного цвета.
X[Y*="Z"]
Описывает стиль всех элементов X, имеющих в тексте атрибута Y значение Z.
a[href*="elims.org.ua"] { color: black; }
Все ссылки ведущие куда-либо на сайт elims.org.ua окрасятся в черный цвет.
X[Y^="Z"]
Описывает стиль всех элементов X, с атрибутами Y значение которых начинается на Z.
a[href^="https"] { color: black; }
Все ссылки на https сайты окрасятся в черный цвет.
X[Y$="Z"]
Описывает стиль всех элементов X, с атрибутами Y значение которых заканчивается на Z.
a[href$=".jpg"] { color: black; }
Все ссылки указывающие на изображения окрасятся в черный цвет
X[Y~="Z"]
Описывает стиль всех элементов X, с атрибутом Y значение которых содержит слово Z. Может пригодиться когда в атрибуте через пробел указано несколько классов.
div[class~="head"] { width=100%; }
Псевдоклассы CSS:
X:link
a:link { color: green; }
Псевдокласс :link, описывает стиль ссылкам, на которые еще НЕ кликнули
X:visited
a:visited { color: red; }
Псевдокласс :visited, выделяем все ссылки, по которым уже кликали.
X:hover
div.elims-class:hover {color:red}
Задаем стиль элементу X в тот момент, когда на него наведен курсор мышки
X:checked
Описывает отмеченные radio или checkbox элементы
input[type=radio]:checked { border:1px solid black; }
X:not(Y)
Задаем стиль всем элементам X, кроме того, который указан в скобках.
div:not(#elims-id) {color:red}
Все div-блоки кроме того, у которого id=elims-id окрасятся в красный цвет.
X:first-of-type
Задает стиль первому элементу X.
p:first-of-type {color:red}
Первый абзац будет красного цвета.
X:last-of-type
Задает стиль последнему элементу X.
p:last-of-type {color:red}
Последний абзац будет красного цвета.
X:nth-of-type(N)
Задаем стиль N-му элементу X. N может принимать не только значение целого числа, но и выражения. Например: "2n+1" - все нечетные элементы, "3n" - каждый третий элемент.
p:nth-of-type(3) {color:red}
Третий абзац будет красного цвета.
X:nth-last-of-type(n)
Задаем стиль N-му элементу X с конца. N может принимать выражение.
p:nth-of-type(3) {color:red}
Третий абзац с конца будет красного цвета.
X:first-child
Задает стиль первому дочернему элементу в X.
li:first-child {color:red}
Первый пункт списка будет красного цвета.
X:last-child
Задает стиль последнему дочернему элементу в X.
li:last-child {color:red}
Последний пункт списка будет красного цвета.
X:nth-child(N)
Задаем стиль N-му дочернему элементу элемента X. N может принимать выражение.
li:nth-child(2n) {color:red}
Текст в каждом втором (парном) пункте списка(ul) будет красного цвета.
X:nth-last-child(N)
Задаем стиль N-му дочернему элементу элемента X отсчитывая с конца. N может принимать выражение.
li:nth-last-child(4) {color:red}
Текст в четвертом пункте списка (ul) с конца будет красного цвета.
X:only-child
Стиль для дочернего элемента который является единственным у своего родителя, никаких других элементов у родителя нет.
p:only-child {color:red}
X:only-of-type
p:only-of-type {color:red}
Стиль элемента который является единственным указанного типа у своего родителя. То есть если в div-блоке есть один абзац, один span и много изображений вне этого абзаца, то такой абзац будет окрашен, так как он является единственным в div-блоке.
Псевдоэлементы CSS:
X:before, X:after
Вывод желаемого контента (параметр content) с описанным стилем до и после элемента X.
.new:after {content: "Новый материал!"; color: red; font-size: 90%;}
Добавляем красную надпись "Новый материал" после элементов класcа .new.
X::first-letter
Задаем стиль первой букве в элементе X.
p::first-letter{font-size:200%;}
Первая буква в параграфе будет в два раза больше.
X::first-letter
Задаем стиль первой строке в элементе X.
p::first-line{font-weight:600;}
Первая строка в параграфе будет с жирным текстом.
Ссылки:
- cssdeck.com/labs - ресурс на котором можно тестировать css код, по ссылке откроется мой пример тестирования псевдоклассов only-child и only-of-type.
- html5.by/blog/placeholder - псевдокласс placeholder и интересные эффекты
