.Х
.topic-title {
background-color: yellow;
}
CSS селектор по классу Х. Разница между id и классом в том, что один и тот же класс может быть у нескольких элементов на странице, а id всегда уникален. Классы стоит использовать для применения одного и того же стиля к нескольким элементам.
#X
#content {
width: 960px;
margin: 0 auto;
}
CSS селектор по id. Знак решетки перед CSS селектором Х выбирает элемент у которого id = Х.
*
* {
margin: 0;
padding: 0;
}
CSS селектор всех элементов. Символ звездочки выбирает все элементы которые есть на странице. Многие разработчики используют его для того, чтобы убрать (обнулить) значения отступов (margin и padding) у всех элементов страницы. Тем не менее, на практике лучше так не делать, потому что этот CSS селектор довольно сильно грузит браузер перебором всех элементов на странице.
Символ * также можно использовать чтобы выделить все дочерние элементы:
#header * {
border: 5px solid grey;
}
В этом примере выделяются все дочерние элементы (потомки) элемента с #header. Но всегда стоит помнить, что этот селектор достаточно тяжел для браузера.
X
a {
color: green;
}
ol {
margin-left: 15px;
}
CSS селектор типа. Как выбрать все элементы одного типа, если у них нет ни id ни классов? Стоит использовать CSS селектор по типу элемента.
Х Y
li a {
font-weight: bold;
text-decoration: none;
}
CSS селектор потомков или CSS селектор дочерних элементов используется чаще всего. Его используют если необходимо выбрать элементы определенного типа из множества дочерних элементов. Например, нужно выделить все ссылки, которые находятся в элементе li.
Х + Y
div + p {
font-family: 'Helvetica Neue', Arial, sans-serif;
font-size: 18px;
}
Смежный селектор элементов выбирает только элемент типа Y, который идет сразу после элемента Х. В этом случае каждый параграф следующий сразу после каждого элемента div будет получать специальный тип и размер шрифта.
Х > Y
#content > ul {
border: 1px solid green;
}
CSS селектор потомков. Разница между селекторами Х Y и X > Y в том, что рассматриваемый CSS селектор будет выбирать только непосредственные дочерние элементы (выберет только прямых потомков). К примеру:
<div id="content">
<ul>
<li>Элемент списка
<ul>
<li>Потомок первого элемента списка</li>
</ul>
</li>
<li>Элемент списка</li>
<li>Элемент списка</li>
</ul>
</div>
CSS селектор #content > ul выберет только ul, который является прямым потомком блока div с id="container". Он не выберет ul, являющийся потомком первого li. Это достаточно выгодный по скорости работы CSS селектор.
Х ~ Y
ol ~ p {
margin-left: 10px;
}
Селектор сестринских (саблинговых) элементов менее строгий чем X + Y. Он выберет не только первый, но и все остальные элементы p, идущие за ol.
X:visited and X:link
a:link {
color: green;
}
a:visited {
color: grey;
}
Псевдо-класс :link используется для выбора всех ссылок, на которые еще не кликнули. Если же нужно применить определенный стиль к уже посещенным ссылкам, то для этого используется псевдо-класс :visited.
X[title]
a[title] {
color: red;
}
CSS селектор по атрибуту. В этом примере выбираются только те ссылки, у которых есть атрибут title.
X [href="foo"]
a[href="https://www.google.com/"] {
color: yellow;
}
Все ссылки, атрибут href у которых равен https://www.google.com/ станут желтыми. Остальные ссылки выбраны не будут.
X [href*="google"]
a[href*="google"] {
color: #dfc11f;
}
Звездочка означает, что искомое значение должно быть где-нибудь в атрибуте (в любой части атрибута href). Таким образом, будут выбраны и ссылки с https://www.google.com/ и www.google.com и google.com. Ко всем выбранным ссылкам будет применен золотой цвет.
X[href^="http"]
a[href^="http"] {
background: url(path/to/external/icon.png) no-repeat;
padding-left: 15px;
}
На некоторых сайтах рядом со ссылками, ведущими на другие сайты, проставлены небольшие иконки со стрелочками, чтобы показать что это внешние ссылки. Карат “^” – это символ для обозначения начала строки. Таким образом для выбора всех тэгов, у которых href начинается с http, нужно использовать CSS селектор с каратом, как это показано на примере выше.
X[href$=".jpg"]
a[href$=".jpg"] {
color: green;
}
Здесь используется регулярное выражение и символ $ для того, чтобы обозначить конец строки. В данном примере мы ищем все ссылки, которые ссылаются на картинки с расширением .jpg.
X[data-*="foo"]
a[data-filetype="image"] {
color: green;
}
Здесь мы применяем CSS селектор по пользовательскому атрибуту. Добавляем наш собственный атрибут data-filetype в каждую ссылку:
<a href="path/to/image.jpg" data-filetype="image">ссылка</a>
Теперь, с помощью приведеного выше CSS селектора, можно выбирать все ссылки ведущие на картинки с любым расширением.
X[foo~="bar"]
Тильда (~) позволяет выделить определенный атрибут из списка атрибутов, разделенных пробелом. Можно прописать наш собственный атрибут data-info, в котором указывать несколько ключевых слов через пробел. Таким образом можно указать, что ссылка является внешней и ведет на изображение:
<a href="path/to/image.jpg" data-info="external image">ссылка</a>
С помощью такого приема мы можем выбирать элементы с нужными нам комбинациями атрибутов:
/* Выбрать элемент, атрибут data-info которого содержит значение external */
a[data-info~="external"] {
color: green;
}
/* Выбрать элемент, атрибут data-info которого содержит значение image */
a[data-info~="image"] {
border: 2px dashed black;
}
X:checked
input[type=radio]:checked {
border: 3px outset black;
}
Этот псевдокласс выделяет только такие элементы, как checkbox или radio button, причем только когда они уже в отмеченном состоянии.
X:after
Псевдоклассы :before и :after очень полезные – они создают контент до и после выбранного элемента.
.clearfix:after {
content: "";
display: block;
}
X:hover
div:hover {
background-color: rgba(11,77,130,0.5);
}
Применяет к элементу определенный стиль, когда на него наводится курсор мыши.
X:not(selector)
div:not(#content) {
color: grey;
}
Псевдокласс not (отрицания) бывает полезен когда, к примеру, нужно выбрать все div, за исключением того, который имеет id="content".
По такому же принципу можно выбрать все элементы кроме p:
*:not(p) {
color: blue;
}
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;
}
X:first-child
ul li:first-child {
border-top: none;
}
Псевдокласс first-child выбирает только первого потомка родительского элемента. Часто используется чтобы убрать border в первом элементе списка.
X:last-child
ul > li:last-child {
border-bottom: none;
}
Псевдокласс last-child выбирает последнего потомка родительского элемента.
X:only-child
div p:only-child {
color: green;
}
Псевдокласс only-child позволяет выбрать те элементы, которые являются единственными потомками для своих родителей.
X:nth-child(n)
li:nth-child(3) {
color: black;
}
Выбирает дочерний элемент по номеру, указанному в параметре. Селектор nth-child принимает целое число в качестве параметра, однако отсчет ведется c 1, т.е. если нужно выбрать второй пункт списка, используйте li:nth-child(2).
X:nth-last-child(n)
li:nth-last-child(2) {
color: red;
}
Если у вас большой список элементов в ul и нужно выбрать третий элемент с конца? Вместо того, чтобы писать li:nth-child(109), можно использовать селектор последних потомков nth-last-child. Этот метод такой же как и предыдущий, но отсчет ведется с конца.
X:nth-of-type(n)
ul:nth-of-type(3) {
border: 1px dotted black;
}
Если на странице есть четыре неупорядоченных списка и нужно применить стиль только к третьему из них, не имеющему уникального id, стоит использовать nth-of-type.
X:nth-last-of-type(n)
ul:nth-last-of-type(3) {
border: 2px ridge blue;
}
Псевдокласс nth-last-of-type(n) предназначен для выбора n-ого элемента определенного типа с конца.
X:only-of-type
li:only-of-type {
font-weight: bold;
}
Псевдокласс only-of-type выбирает элементы, не имеющие соседей в пределах родительского элемента. К примеру можно выбирать все ul, которые содержат только одинокие li.
X:first-of-type
ul:first-of-type > li:nth-child(3) {
font-style: italic;
}
Псевдокласс first-of-type выбирает первый элемент заданного типа.