I want to apply styles only to the table inside the DIV with a particular class:
Note: I’d rather use a css-selector for children elements.
Why does the #1 works and #2 doesn’t?
1:
div.test th, div.test td, div.test caption {padding:40px 100px 40px 50px;}
2:
div.test th, td, caption {padding:40px 100px 40px 50px;}
HTML:
<html>
<head>
<style>
div.test > th, td, caption {padding:40px 100px 40px 50px;}
</style>
</head>
<body>
<div>
<table border="2">
<tr><td>some</td></tr>
<tr><td>data</td></tr>
<tr><td>here</td></tr>
</table>
</div>
<div class="test">
<table border="2">
<tr><td>some</td></tr>
<tr><td>data</td></tr>
<tr><td>here</td></tr>
</table>
</div>
</body>
</html>
What am I doing wrong?
YakovL
7,22112 gold badges58 silver badges93 bronze badges
asked Mar 10, 2009 at 20:19
1
This code «div.test th, td, caption {padding:40px 100px 40px 50px;}» applies a rule to all th elements which are contained by a div element with a class named test, in addition to all td elements and all caption elements.
It is not the same as «all td, th and caption elements which are contained by a div element with a class of test«. To accomplish that you need to change your selectors:
‘>‘ isn’t fully supported by some older browsers (I’m looking at you, Internet Explorer).
div.test th,
div.test td,
div.test caption {
padding: 40px 100px 40px 50px;
}
answered Mar 10, 2009 at 20:21
Ken BrowningKen Browning
28.5k6 gold badges56 silver badges67 bronze badges
5
.test * {padding: 40px 100px 40px 50px;}
answered May 24, 2012 at 19:23
Richard EdwardsRichard Edwards
1,9501 gold badge12 silver badges19 bronze badges
1
The > selector matches direct children only, not descendants.
You want
div.test th, td, caption {}
or more likely
div.test th, div.test td, div.test caption {}
Edit:
The first one says
div.test th, /* any <th> underneath a <div class="test"> */
td, /* or any <td> anywhere at all */
caption /* or any <caption> */
Whereas the second says
div.test th, /* any <th> underneath a <div class="test"> */
div.test td, /* or any <td> underneath a <div class="test"> */
div.test caption /* or any <caption> underneath a <div class="test"> */
In your original the div.test > th says any <th> which is a **direct** child of <div class="test">, which means it will match <div class="test"><th>this</th></div> but won’t match <div class="test"><table><th>this</th></table></div>
answered Mar 10, 2009 at 20:22
GregGreg
313k53 gold badges368 silver badges330 bronze badges
2
If you want to add style in all child and no specification for html tag then use it.
Parent tag div.parent
child tag inside the div.parent like <a>, <input>, <label> etc.
code : div.parent * {color: #045123!important;}
You can also remove important, its not required
Szymon Toda
4,34911 gold badges40 silver badges62 bronze badges
answered May 2, 2013 at 6:55
0
Here is some code that I recently wrote. I think that it provides a basic explanation of combining class/ID names with pseudoclasses.
.content {
width: 800px;
border: 1px solid black;
border-radius: 10px;
box-shadow: 0 0 5px 2px grey;
margin: 30px auto 20px auto;
/*height:200px;*/
}
p.red {
color: red;
}
p.blue {
color: blue;
}
p#orange {
color: orange;
}
p#green {
color: green;
}<!DOCTYPE html>
<html>
<head>
<title>Class practice</title>
<link href="wrench_favicon.ico" rel="icon" type="image/x-icon" />
</head>
<body>
<div class="content">
<p id="orange">orange</p>
<p id="green">green</p>
<p class="red">red</p>
<p class="blue">blue</p>
</div>
</body>
</html>
jdgregson
1,40717 silver badges38 bronze badges
answered Nov 26, 2012 at 15:32
MarkMark
911 silver badge1 bronze badge
1
This code can do the trick as well, using the SCSS syntax
.parent {
& > * {
margin-right: 15px;
&:last-child {
margin-right: 0;
}
}
}
Cray
2,7067 gold badges22 silver badges32 bronze badges
answered May 6, 2020 at 4:54
greguintowgreguintow
891 silver badge4 bronze badges
div.test td, div.test caption, div.test th
works for me.
The child selector > does not work in IE6.
answered Mar 10, 2009 at 20:32
TraingamerTraingamer
1,4088 silver badges9 bronze badges
0
As far as I know this:
div[class=yourclass] table { your style here; }
or in your case even this:
div.yourclass table { your style here; }
(but this will work for elements with yourclass that might not be divs) will affect only tables inside yourclass. And, as Ken says, the > is not supported everywhere (and div[class=yourclass] too, so use the point notation for classes).
answered Mar 10, 2009 at 20:22
tunnuztunnuz
23k30 gold badges89 silver badges127 bronze badges
For the given example:
<div class="menu">
<div class="menu_top">Menu1<div class="sub_menu">SubMenu1</div></div>
<div class="menu_top">Menu2<div class="sub_menu">SubMenu2</div></div>
<div class="menu_top">Menu3<div class="sub_menu">SubMenu3</div></div>
</div>
How can I change the display property for the respective childs elements?
I was trying the solution:
.menu_top .sub_menu{
display: none;
}
.menu_top:hover div.sub_menu{
display: block;
}
But all the «sub_menu» are shown when the mouse is over any «menu_top».
asked Jul 12, 2011 at 1:23
VictorVictor
8,21914 gold badges79 silver badges127 bronze badges
1
You want to display the .sub_menu when hovering over .menu_top?
.menu .menu_top:hover .sub_menu {
display: block;
}
answered Jul 12, 2011 at 1:28
David TangDavid Tang
91.2k29 gold badges166 silver badges149 bronze badges
The selector should be .menu_top:hover if you only want to display the respective child .sub_menu on hover.
See it in action — http://jsfiddle.net/spBJH/
answered Jul 12, 2011 at 1:29
Jason McCrearyJason McCreary
70.7k22 gold badges131 silver badges174 bronze badges
You just need a minor change i think.
You have .menu:hover instead of .menu_top:hover
try this instead:
.menu .sub_menu{
display: none;
}
.menu_top:hover div.sub_menu{
display: block;
}
answered Jul 12, 2011 at 1:27
James KhouryJames Khoury
20.7k4 gold badges34 silver badges63 bronze badges
Try:
.menu_top:hover div.sub_menu {
display:block;
}
answered Jul 12, 2011 at 1:28
Mike NeumegenMike Neumegen
2,4261 gold badge23 silver badges37 bronze badges
5.6 Child selectors
A child selector matches when an element is the child of some element. A child selector is made up of two or more selectors separated by «>».
The following rule sets the style of all P elements that are children of BODY:
body > P { line-height: 1.3 }
The following example combines descendant selectors and child selectors:
div ol>li p
It matches a P element that is a descendant of an LI; the LI element must be the child of an OL element; the OL element must be a descendant of a DIV. Notice that the optional white space around the «>» combinator has been left out.
answered Jul 12, 2011 at 12:22
VictorVictor
8,21914 gold badges79 silver badges127 bronze badges
You’ve got them switched.
.menu:hover = { do something when I hover over .menu }
I think what you want is:
.sub_menu:hover { this }
eyllanesc
230k18 gold badges147 silver badges218 bronze badges
answered Jul 12, 2011 at 1:27
DawsonDawson
7,5371 gold badge26 silver badges25 bronze badges
For the given example:
<div class="menu">
<div class="menu_top">Menu1<div class="sub_menu">SubMenu1</div></div>
<div class="menu_top">Menu2<div class="sub_menu">SubMenu2</div></div>
<div class="menu_top">Menu3<div class="sub_menu">SubMenu3</div></div>
</div>
How can I change the display property for the respective childs elements?
I was trying the solution:
.menu_top .sub_menu{
display: none;
}
.menu_top:hover div.sub_menu{
display: block;
}
But all the «sub_menu» are shown when the mouse is over any «menu_top».
asked Jul 12, 2011 at 1:23
VictorVictor
8,21914 gold badges79 silver badges127 bronze badges
1
You want to display the .sub_menu when hovering over .menu_top?
.menu .menu_top:hover .sub_menu {
display: block;
}
answered Jul 12, 2011 at 1:28
David TangDavid Tang
91.2k29 gold badges166 silver badges149 bronze badges
The selector should be .menu_top:hover if you only want to display the respective child .sub_menu on hover.
See it in action — http://jsfiddle.net/spBJH/
answered Jul 12, 2011 at 1:29
Jason McCrearyJason McCreary
70.7k22 gold badges131 silver badges174 bronze badges
You just need a minor change i think.
You have .menu:hover instead of .menu_top:hover
try this instead:
.menu .sub_menu{
display: none;
}
.menu_top:hover div.sub_menu{
display: block;
}
answered Jul 12, 2011 at 1:27
James KhouryJames Khoury
20.7k4 gold badges34 silver badges63 bronze badges
Try:
.menu_top:hover div.sub_menu {
display:block;
}
answered Jul 12, 2011 at 1:28
Mike NeumegenMike Neumegen
2,4261 gold badge23 silver badges37 bronze badges
5.6 Child selectors
A child selector matches when an element is the child of some element. A child selector is made up of two or more selectors separated by «>».
The following rule sets the style of all P elements that are children of BODY:
body > P { line-height: 1.3 }
The following example combines descendant selectors and child selectors:
div ol>li p
It matches a P element that is a descendant of an LI; the LI element must be the child of an OL element; the OL element must be a descendant of a DIV. Notice that the optional white space around the «>» combinator has been left out.
answered Jul 12, 2011 at 12:22
VictorVictor
8,21914 gold badges79 silver badges127 bronze badges
You’ve got them switched.
.menu:hover = { do something when I hover over .menu }
I think what you want is:
.sub_menu:hover { this }
eyllanesc
230k18 gold badges147 silver badges218 bronze badges
answered Jul 12, 2011 at 1:27
DawsonDawson
7,5371 gold badge26 silver badges25 bronze badges
Вы дошли до третьей части этой главы. Здесь вы узнаете, как использовать селекторы дочерних элементов в CSS, а также познакомитесь с некоторыми дополнительными псевдоклассами для более точной выборки.
Дочерние селекторы CSS
В предыдущей статье мы рассказывали о родственных связях между элементами HTML-документа, в том числе и о дочерних элементах. Давайте посмотрим на примере, как эти связи можно использовать в CSS.
Представьте, что вам нужно присвоить стиль только тем тегам <p>, которые являются дочерними по отношению к <body>, не затрагивая остальные <p> (например, <p>, дочерние по отношению к <div>).
Как это сделать? Очень просто: создадим дочерний селектор:
body > p {
color: #333;
}
Обратите внимание на символ > после body. С помощью него вы указываете, что стиль применяется исключительно для дочерних тегов <p> родителя <body>. Если символ убрать, то стиль применится абсолютно ко всем тегам <p>, которые находятся внутри тега <body>, хотя они могут и не являться для него дочерними.
Дополнительные псевдоклассы
В CSS3 существует ряд псевдоклассов для работы с дочерними элементами. Ниже приведено описание каждого из них, примеры использования, а также отличия между псевдоклассами вида «child» и «of-type».
:first-child– с помощью этого псевдокласса можно применить стиль к указанному элементу веб-страницы, при условии, что он является первым дочерним элементом своего родителя;:last-child– стиль применяется к указанному элементу веб-страницы при условии, что он является последним дочерним элементом своего родителя;:nth-child– позволяет выбрать четные (even) и нечетные (odd) дочерние элементы; также с помощью данного псевдокласса можно стилизовать чередующиеся дочерние элементы, используя выражения видаan+bи числа;:only-child– применяется к дочернему элементу при условии, что тот является единственным ребенком у родителя;:first-of-type– стиль применяется к первому элементу указанного типа (даже если этот элемент не является первым дочерним для своего родителя и над ним находятся другие дочерние элементы других типов);:last-of-type– работает точно так же, как и предыдущий псевдокласс, с той лишь разницей, что стиль применяется к последнему элементу указанного типа;:nth-of-type– по принципу работы похож на:nth-child, но ориентируется на тип элемента;:only-of-type– применяется к дочернему элементу указанного типа при условии, что тот является у родителя единственным ребенком своего типа.
Пример использования :first-child, :last-child и :nth-child
<!-- HTML --> <div> <p>Первый ребенок</p> <p>Второй ребенок</p> <p>Третий ребенок</p> <table> <tr> <td>Нечетный номер</td> </tr> <tr> <td>Четный номер</td> </tr> <tr> <td>Нечетный номер</td> </tr> <tr> <td>Четный номер</td> </tr> </table> <p>Последний ребенок</p> </div>
Стиль CSS:
/* CSS */
p:first-child {
font-weight: bold;
text-transform: uppercase;
}
p:last-child {
font-style: italic;
font-size: 0.8em;
}
p:nth-child(3) {
color: red;
}
tr:nth-child(odd) {
background-color: #A2DED0;
}
tr:nth-child(even) {
background-color: #C8F7C5;
}
Мы написали CSS стиль для дочерних элементов простого HTML-документа, где тег <div> является родителем для тегов <p>, <table>. Разберем CSS по порядку.
Первое правило – p:first-child – касается элемента p: если он является первым дочерним элементом своего родителя, то к нему применяется стиль (в нашем случае это жирный шрифт и преобразование текста в верхний регистр). Если в данный HTML-код сразу после открывающего тега <div> добавить еще какой-нибудь тег (к примеру, <h2>), то стиль p:first-child уже не будет отображаться, поскольку <p> перестанет быть первым дочерним тегом. В данном случае первым дочерним элементом будет h2.
Всё то же самое происходит и с правилом p:last-child – стиль CSS будет применен к тегу <p> лишь тогда, когда он будет являться последним дочерним элементом своего родителя. Добавьте после <p> любой другой тег отличного типа и вы увидите, что правило p:last-child перестанет применяться.
Правило p:nth-child(3) работает для третьего дочернего тега <p> (об этом свидетельствует число 3 в скобках). Цвет шрифта для этого абзаца становится красным. Вы можете изменить число 3 (например, на 2) и посмотреть результат.
Правила tr:nth-child(odd) и tr:nth-child(even) работают для нечётных и чётных элементов tr соответственно. Вы можете увидеть результат на скриншоте, а также скопировать весь код и поэкспериментировать со стилями самостоятельно.
Пример использования :first-of-type, :last-of-type, :nth-of-type и :only-of-type
<!-- HTML --> <div> <h2>Первый ребенок</h2> <p>Второй ребенок</p> <p>Третий ребенок</p> <h3>Четвертый ребенок</h3> <p>Пятый ребенок</p> <h4>Последний ребенок</h4> </div>
Стиль CSS:
/* CSS */
p:first-of-type {
color: violet;
text-transform: uppercase;
}
p:last-of-type {
font-style: italic;
font-size: 0.8em;
}
p:nth-of-type(3) {
color: red;
}
p:nth-of-type(odd) {
background-color: #A2DED0;
}
p:nth-of-type(even) {
background-color: #C8F7C5;
}
h3:only-of-type {
text-decoration: underline;
}
Первое правило CSS, которое вы видите – это p:first-of-type. Что оно делает? Оно выбирает дочерний элемент типа p, который первым встречается у родителя. И не важно, на каком месте среди элементов других типов находится данный тег – на первом, втором или десятом. В этом и заключается отличие между псевдоклассами :first-child и :first-of-type.
Второе правило – p:last-of-type – применяет стиль к последнему дочернему элементу типа p. Как видно из HTML-кода, после последнего тега <p> есть еще и тег <h4>, присутствие которого никак не влияет на выполнение CSS-правила (в отличие от варианта с :last-of-child).
Следующее правило – p:nth-of-type(3) – изменяет цвет шрифта на красный. Применяется этот стиль к тегу <p>, который является третьим по счету элементом своего типа у родителя. На скриншоте вы видите, что красный цвет применяется к тегу <p>, который по факту является пятым ребенком тега <div>. Но если не брать во внимание элементы других типов, то получается, что тег <p> с красным шрифтом находится на третьем месте (среди тегов своего типа). Таким образом работает данное правило.
Правила p:nth-of-type(even) и p:nth-of-type(odd) работают аналогично: поскольку перед двоеточием указано имя p, то выбираются четные и нечетные дочерние элементы типа p и окрашиваются в заданные цвета. Остальные элементы пропускаются.
Последнее правило – h3:only-of-type – применяется к содержимому тега <h3>, делая текст подчеркнутым. Данный стиль работает лишь потому, что тег <h3> является единственным дочерним элементом своего типа. Если в HTML-код добавить еще один тег <h3>, стиль не будет применён.
Выводы
Дочерний селектор CSS позволяет изменить стиль дочернего элемента HTML-документа, исходя из того, кто является его родителем.
С помощью дополнительных псевдоклассов :first-child, :last-child, :nth-child, :only-child можно стилизовать дочерние элементы HTML-документа, ориентируясь на их местоположение, нумерацию в дереве элементов.
Псевдоклассы :first-of-type, :last-of-type, :nth-of-type, :only-of-type позволяют применять стиль к дочерним элементам HTML-документа, ориентируясь на их тип, а также на нумерацию в дереве элементов.
Следующая часть этой главы – о смежных и родственных селекторах.
Дочерним называется элемент, который непосредственно располагается внутри родительского
элемента. Чтобы лучше понять отношения между элементами документа, разберём
небольшой код (пример 12.1).
Пример 12.1. Вложенность элементов в документе
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Lorem ipsum</title>
</head>
<body>
<div class="main">
<p><em>Lorem ipsum dolor sit amet</em>, consectetuer adipiscing
elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam
erat volutpat.</p>
<p><strong><em>Ut wisis enim ad minim veniam</em></strong>,
quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex
ea commodo consequat.</p>
</div>
</body>
</html>В данном примере применяется несколько контейнеров, которые в коде располагаются
один в другом. Нагляднее это видно на дереве элементов, так называется структура
отношений тегов документа между собой (рис. 12.1).
Рис. 12.1. Дерево элементов для примера
На рис. 12.1 в удобном виде представлена вложенность элементов и их иерархия.
Здесь дочерним элементом по отношению к тегу <div> выступает тег <p>. Вместе с тем тег <strong> не является дочерним для тега <div>, поскольку
он расположен в контейнере <p>.
Вернёмся теперь к селекторам. Дочерним селектором считается такой, который
в дереве элементов находится прямо внутри родительского элемента. Синтаксис
применения таких селекторов следующий.
Селектор 1 > Селектор 2 { Описание правил стиля }
Стиль применяется к Селектору 2, но только в том случае, если он является
дочерним для Селектора 1.
Если снова обратиться к примеру 12.1, то стиль вида P
> EM { color: red } будет установлен для первого абзаца документа,
поскольку тег <em> находится внутри контейнера <p>, и не даст никакого результата для второго
абзаца. А все из-за того, что тег <em> во втором
абзаце расположен в контейнере <strong>, поэтому
нарушается условие вложенности.
По своей логике дочерние селекторы похожи на селекторы контекстные. Разница
между ними следующая. Стиль к дочернему селектору применяется только в том случае,
когда он является прямым потомком, иными словами, непосредственно располагается
внутри родительского элемента. Для контекстного селектора же допустим любой уровень
вложенности. Чтобы стало понятно, о чем идет речь, разберём следующий код (пример 12.2).
Пример 12.2. Контекстные и дочерние селекторы
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Дочерние селекторы</title>
<style>
DIV I { /* Контекстный селектор */
color: green; /* Зеленый цвет текста */
}
P > I { /* Дочерний селектор */
color: red; /* Красный цвет текста */
}
</style>
</head>
<body>
<div>
<p><i>Lorem ipsum dolor sit amet</i>, consectetuer adipiscing
elit, sed diem nonummy nibh euismod tincidunt ut lacreet <i>dolore magna</i>
aliguam erat volutpat.</p>
</div>
</body>
</html>Результат данного примера показан на рис. 12.2.
Рис. 12.2. Цвет текста, заданный с помощью дочернего селектора
На тег <i> в примере действуют одновременно два правила: контекстный селектор (тег <i> расположен внутри <div>) и дочерний селектор (тег <i> является дочерним по отношению к <p>). При этом правила являются равносильными, поскольку все условия для них выполняются и не противоречат друг другу. В подобных случаях применяется стиль, который расположен в коде ниже, поэтому курсивный текст отображается красным цветом. Стоит поменять правила местами и поставить DIV I ниже, как цвет текста изменится с красного на зеленый.
Заметим, что в большинстве случаев от добавления дочерних селекторов можно
отказаться, заменив их контекстными селекторами. Однако использование дочерних
селекторов расширяет возможности по управлению стилями элементов, что в итоге
позволяет получить нужный результат, а также простой и наглядный код.
Удобнее всего применять указанные селекторы для элементов, которые обладают
иерархической структурой — сюда относятся, например, таблицы и разные списки.
В примере 12.3 показано изменение вида списка с помощью стилей. За счёт
вложения одного списка в другой получаем разновидность меню. Заголовки при этом
располагаются горизонтально, а набор ссылок — вертикально под заголовками
(рис. 12.3).
Рис. 12.3. Список в виде меню
Для размещения текста по горизонтали к селектору LI добавляется стилевое свойство float. Чтобы при этом
разделить между собой стиль горизонтального и вертикального списка и применяются
дочерние селекторы (пример 12.3).
Пример 12.3. Использование дочерних селекторов
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Дочерние селекторы</title>
<style>
UL#menu {
margin: 0; padding: 0; /* Убираем отступы */
}
UL#menu > LI {
list-style: none; /* Убираем маркеры списка */
width: 100px; /* Ширина элемента в пикселах */
background: #b3d9d2; /* Цвет фона */
color: #333; /* Цвет текста */
padding: 5px; /* Поля вокруг текста */
font-family: Arial, sans-serif; /* Рубленый шрифт */
font-size: 90%; /* Размер шрифта */
font-weight: bold; /* Жирное начертание */
float: left; /* Располагаем элементы по горизонтали */
}
LI > UL {
list-style: none; /* Убираем маркеры списка */
margin: 0; padding: 0; /* Убираем отступы вокруг элементов списка */
border-bottom: 1px solid #666; /* Граница внизу */
padding-top: 5px; /* Добавляем отступ сверху */
}
LI > A {
display: block; /* Ссылки отображаются в виде блока */
font-weight: normal; /* Нормальное начертание текста */
font-size: 90%; /* Размер шрифта */
background: #fff; /* Цвет фона */
border: 1px solid #666; /* Параметры рамки */
border-bottom: none; /* Убираем границу снизу */
padding: 5px; /* Поля вокруг текста */
}
</style>
</head>
<body>
<ul id="menu">
<li>Правка
<ul>
<li><a href="#">Отменить</a></li>
<li><a href="#">Вырезать</a></li>
<li><a href="#">Копировать</a></li>
<li><a href="#">Вставить</a></li>
</ul>
</li>
<li>Начертание
<ul>
<li><a href="#">Жирное</a></li>
<li><a href="#">Курсивное</a></li>
<li><a href="#">Подчеркнутое</a></li>
</ul>
</li>
<li>Размер
<ul>
<li><a href="#">Маленький</a></li>
<li><a href="#">Нормальный</a></li>
<li><a href="#">Средний</a></li>
<li><a href="#">Большой</a></li>
</ul>
</li>
</ul>
</body>
</html>В данном примере дочерние селекторы требуются, чтобы разделить стиль элементов списка верхнего уровня и вложенные списки, которые выполняют разные задачи, поэтому стиль для них не должен пересекаться.
Вопросы для проверки
1. Какой цвет будет у жирного курсивного текста в коде
<p>Нормы освещённости построены на <b><i>основе классификации зрительных работ</i></b> по определенным количественным признакам.</p>
При использовании следующего стиля?
P { color: green; }
B {color: blue; }
I {color: orange; }
B > I { color: olive; }
P > I { color: yellow; }
- Зелёный.
- Синий.
- Оранжевый.
- Оливковый.
- Жёлтый.
2. Какой элемент является родительским для тега <TITLE>?
- <HEAD>
- <BODY>
- <HTML>
- <META>
- <!DOCTYPE>
3. Для какого тега элемент <!DOCTYPE> выступает родителем?
- <HTML>
- <TITLE>
- <BODY>
- <HEAD>
- Ни для одного тега.
Ответы
1. Оливковый.
2. <HEAD>
3. Ни для одного тега.
Разные селекторы можно комбинировать между собой, что в итоге позволяет нам сократить код и нацелить стиль на выбранные элементы, основываясь на их положении относительно друг друга.
Группирование селекторов (А, B)
Группирование применяет один и тот же стиль сразу к нескольким селекторам. Это делается для удобства представления и сокращения кода CSS. В примере 1 показана обычная запись, здесь для каждого селектора приводится свой набор стилевых свойств.
Пример 1. Стиль для каждого селектора
h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 1.6rem;
color: #003;
}
h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 1.3rem;
color: #333;
}
h3 {
font-family: Arial, Helvetica, sans-serif;
font-size: 1.2rem;
color: #900;
}
p {
font-family: Times, serif;
}Из данного примера видно, что стиль для элементов <h1>, <h2>, <h3> содержит одинаковое значение font-family. Группирование как раз и позволяет установить одно свойство сразу для нескольких селекторов, как показано в примере 2.
Пример 2. Сгруппированные селекторы
h1, h2, h3 {
font-family: Arial, Helvetica, sans-serif;
}
h1 {
font-size: 1.6rem;
color: #003;
}
h2 {
font-size: 1.3rem;
color: #333;
}
h3 {
font-size: 1.2rem;
color: #900;
}В данном примере единое для всех селекторов свойство font-family применяется сразу к нескольким селекторам, а отдельные свойства уже добавляются к каждому селектору отдельно.
Селекторы группируются в виде списка, пункты которого разделяются между собой запятыми. В группу могут входить не только селекторы элементов, но также идентификаторы и классы.
h2, .block, .msg { background: #fff; }Здесь свойство background применяется одновременно к элементу <h2> и к классам block и msg.
Дерево документа
Большинство комбинаций селекторов основано на их положении в дереве документа и относительно друг друга. Дерево документа — это схематичное изображение всех элементов, встречающихся в нашем коде HTML. Для иллюстрации возьмём произвольный документ, показанный в примере 3.
Пример 3. Код HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Сальса</title>
</head>
<body>
<header>
<h1>Сальса</h1>
<ul>
<li><a href="#">Uno</a></li>
<li><a href="#">Dos</a></li>
<li><a href="#">Tres</a></li>
</ul>
</header>
<main>
<p>Сальса — современный социальный танец. Как многие
латиноамериканские танцы, сальса экспрессивна,
разнообразна и богата импровизацией.</p>
</main>
<footer>
<ul>
<li><a href="#">Cinco</a></li>
<li><a href="#">Seis</a></li>
<li><a href="#">Siete</a></li>
</ul>
</footer>
</body>
</html>Дерево документа для этого HTML показано на рис. 1. Схема напоминает крону дерева из-за своей схожести с ветвями и листьями.
Рис. 1. Дерево документа
<!doctype> не считается элементом, поэтому его в расчёт не берём. Сама схема начинается с элемента <html>, он называется «корневой элемент». Все элементы связаны друг с другом сверху вниз и между ними есть следующие связи.
- Предок
- Элемент, внутри которого располагаются другие элементы с произвольным уровнем вложения. Для <p> предками будут <main>, <body> и <html>.
- Потомок
- Элемент, расположенный внутри одного или нескольких предков. К примеру, <a> является потомком как <li>, так и <ul>, поскольку располагается внутри них.
- Родитель
- Непосредственный предок элемента, который располагается выше на один уровень в дереве документа. <header> будет родителем для <ul>, но уже не для <li>, для него родителем будет выступать <ul>.
- Ребёнок (дочерний элемент)
- Непосредственный потомок элемента, который располагается ниже на один уровень в дереве документа. К примеру, дочерним для <main> будет элемент <p>; для <ul> дочерними элементами выступают <li>, но не <a>. У родителя может быть произвольное число дочерних элементов, но у дочернего элемента только единственный родитель.
- Братья (сиблинги)
- Элементы, расположенные на одной ветке и имеющие общего родителя, называются братскими или сиблинги, если пользоваться термином из генетики. Братскими являются элементы <header>, <main> и <footer>, а также <li>. Элементы <a> братскими не являются из-за того, что у них разные родители.
- Смежные
- Братские элементы, расположенные рядом друг с другом. Смежными будут элементы <header> и <main>, а также <main> и <footer>, но никак не <header> и <footer>, потому что они располагаются «через одного».
Селекторы потомка (A B)
Эти селекторы также называются вложенными или контекстными. Такие селекторы состоят из базовых селекторов разделённых пробелом.
footer a { color: #fff; }Такую запись удобнее читать справа налево: стиль применяется к элементу <a>, который является потомком элемента <footer>. В примере 4 показано изменение цвета ссылок, в зависимости от того, где они располагаются — вверху или внизу.
Пример 4. Цвет ссылок
<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Сальса</title>
<style>
header {
background: #e2edc1;
}
footer {
background: #f4783b;
}
ul {
margin: 0; padding: 10px;
}
li { display: inline; margin-right: 10px; }
header a {
color: #333391;
}
footer a {
color: #fff;
}
</style>
</head>
<body>
<header>
<ul>
<li><a href=»#»>Uno</a></li>
<li><a href=»#»>Dos</a></li>
<li><a href=»#»>Tres</a></li>
</ul>
</header>
<main>
<p>Сальса — современный социальный танец. Как многие
латиноамериканские танцы, сальса экспрессивна,
разнообразна и богата импровизацией.</p>
</main>
<footer>
<ul>
<li><a href=»#»>Cinco</a></li>
<li><a href=»#»>Seis</a></li>
<li><a href=»#»>Siete</a></li>
</ul>
</footer>
</body>
</html>
Результат данного примера показан на рис. 2. Для изменения цвета ссылок вверху мы использовали селектор header a, а для ссылок внизу — footer a.
Рис. 2. Ссылки разного цвета
Селекторов не обязательно должно быть только два, можно комбинировать произвольное количество.
.tbl thead td { background: #f0f0f0; }Здесь серый фон добавляется к ячейкам таблицы <td> когда они располагаются внутри <thead>, а тот в свою очередь внутри элемента с классом tbl.
Дочерние селекторы (A > B)
Селекторы потомка выбирают всех заданных потомков указанного элемента, независимо от их уровня вложенности. Чтобы выбрать только дочерние элементы, между селекторами вставляется угловая скобка.
section > h2 { color: red; }Данная запись означает применить стиль к элементу <h2>, который является дочерним по отношению к <section>. Для следующего фрагмента HTML красным цветом будет оформлен первый заголовок <h2>, поскольку только он непосредственно располагается внутри <section> и выступает его дочерним элементом.
<section>
<h2>Заголовок 1</h2>
<div>
<h2>Заголовок 2</h2>
</div>
</section>Дочерние селекторы обычно применяются для ситуаций, когда одинаковые элементы вкладываются внутрь другого несколько раз, но выделить нужно не все, а только определённые элементы. В примере 5 показано создание меню, когда один <ul> располагается внутри другого. Чтобы стилизовать пункты списка первого уровня, не затрагивая остальные, и требуются дочерние селекторы.
Пример 5. Дочерние селекторы
<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Меню</title>
<style>
.menu > li {
border: 3px double black; /* Двойная рамка */
padding: 10px; /* Поля */
list-style: none; /* Убираем маркеры */
}
</style>
</head>
<body>
<ul class=»menu»>
<li>Пункт 1</li>
<li>Пункт 2
<ul>
<li>Пункт 2.1</li>
<li>Пункт 2.2</li>
<li>Пункт 2.3</li>
</ul>
</li>
<li>Пункт 3</li>
</ul>
</body>
</html>
Результат данного примера показан на рис. 3.
Рис. 3. Изменение стиля дочерних элементов
Смежные селекторы (A + B)
Выбирает элемент B, который является смежным для элемента A, иными словами, идёт в коде сразу же после него. К примеру, следующая запись изменит цвет только первого абзаца после заголовка.
h2 + p { color: red; }Смежные селекторы обычно применяются для стилизации полей формы или создания разных эффектов. В примере 6 текстовый абзац с классом hidden прячется с помощью свойства display со значением none. При наведении курсора мыши на абзац с классом more смежный с ним абзац с классом hidden становится виден. Подробнее об использовании :hover говорится в разделе про псевдоклассы.
Пример 6. Смежные элементы
<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Далее</title>
<style>
.hidden {
display: none; /* Прячем элемент */
}
.more:hover + .hidden {
display: block; /* Показываем элемент */
}
</style>
</head>
<body>
<p>Глубокий белый саксаул</p>
<p class=»more»>Далее</p>
<p class=»hidden»>Производство зерна и зернобобовых
отталкивает холодный ксерофитный кустарник</p>
</body>
</html>
Братские селекторы (A ~ B)
Выбирает все братские элементы B, которые идут в коде после элемента A. К примеру, следующая запись изменит цвет всех абзацев после заголовка.
h2 ~ p { color: red; }В примере 7 при наведении курсора мыши на любую звёздочку, все остальные, которые располагаются правее неё, меняют цвет с серого на красный. Поскольку братские селекторы работают только для элементов справа, а не слева от указанного, то мы идём на хитрость и переворачиваем все звёздочки с помощью атрибута dir со значением rtl. Это меняет текст и расположение элементов справа налево.
Пример 7. Братские селекторы
<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Рейтинг</title>
<style>
.star {
color: gray; /* Серый цвет */
font-size: 24px; /* Размер звезды */
text-decoration: none; /* Убираем подчёркивание */
}
.star:hover,
.star:hover ~ .star {
color: red; /* Красный цвет */
}
</style>
</head>
<body>
<div dir=»rtl»>
<a href=»#» class=»star»>★</a>
<a href=»#» class=»star»>★</a>
<a href=»#» class=»star»>★</a>
<a href=»#» class=»star»>★</a>
<a href=»#» class=»star»>★</a>
</div>
</body>
</html>
Результат данного примера показан на рис. 4.
Рис. 4. Использование братского селектора
Комбинации селекторов позволяют выделить элемент, расположенный справа или внутри заданного элемента, но никак не родительский элемент или элемент, расположенный слева.
Последнее изменение: 01.06.2020
О чем речь? CSS селектор – это необходимый инструмент для оформления веб-страницы. Используя один или сразу несколько, можно точечно задать стилевое оформление нужного элемента.
На что обратить внимание? Селекторы бывают простые и сложные, а также их можно группировать по заданным параметрам. Освоив эти операции, время верстки значительно снизится, как и количество проблемным видом страниц.
В статье рассказывается:
- Понятие CSS селекторов
- Виды CSS селекторов
- Группирование CSS селекторов
- Приоритизация селекторов
-
Пройди тест и узнай, какая сфера тебе подходит:
айти, дизайн или маркетинг.Бесплатно от Geekbrains
CSS-селектор является шаблоном, соответствующим определённым элементам HTML-разметки. К тегам, которые подходят для правил селектора, могут быть применены стили.
Браузеры определяют какой из стилей оформления должен быть применен к элементам сайта благодаря селекторам.
В CSS множество различных видов селекторов. Они могут использоваться по одиночке или в различных комбинациях. Это позволяет производить весьма тонкую настройку стилей к выбранным элементам кода, либо к их группам.
Несколько советов новичкам:
- Следует помнить, что в CSS необходимо учитывать регистр букв. В отличие от html это имеет смысл. Таким образом, селекторы css по классу. Center и. center кардинально различаются! Они применимы к совершенно разным элементам, имеющимся в наличии.
- Присваивайте имена селекторам для оформления таким образом, чтобы по ним было понятно о чем речь: .leftColumn – пример неплохого названия, .left в некоторых случаях будет уже неопределенным наименованием, а .llll является полнейшим абсурдом, который без кода под рукой не несет абсолютно никакой полезной информации.
- К уникальным элементам можно применять селектор по идентификатору, то есть присвоить им определенный id, если же страница содержит несколько идентичных компонентов, то следует пользоваться классами.
Виды CSS-селекторов
Универсальный селектор
Один из базовых видов селекторов CSS, имеющий альтернативное название «звездочка», служит для выбора всех элементов.
* {
color: red;
}
При применении этого правила текст всех элементов html на веб-странице приобретет красный цвет.
Скачать файл
Селектор по тегу
Селектор по элементу предназначен для выбора по имени тега.
section {
padding: 1em;
}
Правило предписывает: каждый из элементов <section> будет иметь отступ размером 1em.
Селектор класса
Селектор класса выберет в документе все элементы, к которым был применен класс. Он начинается с символа «точка» ( . )
<div class=»my-class»></div>
<button class=»my-class»></button>
<p class=»my-class»></p>
Компонент документа приобретет жёлтый цвет, если применить к нему этот класс:
.my-class {
color: yellow;
}
Подчеркнем, что символ «точка» не используется в html. ( . ), присутствует только в CSS. Именно этот символ сигнализирует о том, что нужно сопоставить члены атрибутов класса. В языке CSS разными символами или группой символов обозначаются типы селекторов.
Если у элемента html есть несколько классов, среди которых .my-class, то он все равно будет соответствовать этому правилу CSS. Например:
<div class=»my-class another-class some-other-class»></div>
Причина в том, что CSS производит поиск атрибута class, содержащий определенный класс, а не то, что имеет точное соответствие ему.
Атрибут класса может принимать любое значение. Единственное ограничение – запрет на цифру в начале. Например, .2center – это ошибочная запись.
Селектор по идентификатору
Синтаксис — #имяИдентификатора. Предназначен для выбора элемента по значению атрибута id. Пример использования:
#rad {
border: 1px solid blue;
}
Здесь задается граница синего цвета для элемента гипертекстовой разметки со значением rad атрибута id. Пример:
<div id=»rad»></div>
Селектор идентификатора CSS обозначается символом октоторп ( # ). Обнаружив решётку, CSS ищет элемент, который соответствует атрибуту id.
В случае обнаружения веб-обозревателем нескольких элементов, сопоставленных с атрибутом id, все равно будет применяться правило CSS, соответствующее селектору этого атрибута. Но, важно помнить, что у каждого элемента id должно быть уникальное значение. Поэтому применение стилей оформления с использованием селектора по идентификатору ограничено, так как его нельзя будет использовать в другом части кода.
Селектор атрибута
СSS-селектор по атрибуту нужен для выбора элементов по имени и/или значению атрибута. Есть несколько видов селектора по атрибуту. CSS поймет, что следует искать определенный атрибут или его значение, если селектор помещен в квадратные скобки — [attr].
[data-type=’primary’] {
color: purple;
}
В этом образце происходит поиск элементов с атрибутом data-type, значение которого — primary. Пример: <div data-type=»primary»></div>
Возможно задание критерия поиска не только по конкретному значению атрибута data-type, но и по факту наличия у элементов этого атрибута при игнорировании его названия.
[data-type] {
color: purple;
}
<div data-type=»primary»></div>
<div data-type=»secondary»></div>
Текст в приведенных элемента <div> будет иметь пурпурный цвет.
Оператор s, добавленный в селектор по атрибуту позволяет учитывать регистр.
[data-type=’primary’ s] {
color: purple;
}
Топ-30 самых востребованных и высокооплачиваемых профессий 2023
Поможет разобраться в актуальной ситуации на рынке труда
Подборка 50+ ресурсов об IT-сфере
Только лучшие телеграм-каналы, каналы Youtube, подкасты, форумы и многое другое для того, чтобы узнавать новое про IT
ТОП 50+ сервисов и приложений от Geekbrains
Безопасные и надежные программы для работы в наши дни
Уже скачали 19548 
Допустим, что элемент гипертекстовой разметки атрибут data-type имеет значение Primary, то есть с большой буквы. В этом случае, CSS, имеющий четкие указания обращать внимание только на элемент с атрибутом primary, оставит цвет текста без изменения. Есть и обратная функция. Оператор i отключает учет регистра.
Возможно также использование операторов, сопоставляющих компоненты строк внутри значений атрибутов.
/* Элемент href, содержащий адрес «example.com» */
[href*=’example.com’]{
color: purple;
}
/* Элемент href, начинающийся с https */
[href^=’https’]{
color: grey;
}
/* Элемент href, оканчивающийся на .com */
[href$=’.com’] {
color: grey;
}
Читайте также
В этом примере кода оператору $ в CSS-селекторе атрибута присваивается значение типа файла из атрибута href. Это дает возможность использовать псевдоэлемент для добавления префикса к подписи на основе этого типа файла. Динамические идентификаторы в CSS-selector не надёжны, поэтому можно обратиться к элементу, написав CSS-селектор по атрибуту Name.
Псевдоклассы
Псевдоклассы являются дополнением к основному селектору для более точного выбора элементов с учетом их динамического состояния или места расположения.
С их помощью становится возможным применение стиля при наведении курсора как на сам элемент html, так и на его дочерний элемент. Псевдокласс добавляется к селектору символом «двоеточие». При этом такие псевдоклассы как :link предназначены только для ссылок, а :hover или :active используются и для других элементов.
/* На нашу ссылку навели курсор */
a:hover{
outline: 1px dotted red;
}
/* Выбор другого цвета фона для всех четных абзацев */
p:nth-child(even) {
background: silver;
}
Псевдоэлемент
По своей сути псевдоэлементы в CSS – это ключевые слова, добавленные к селектору и позволяющие применять стиль к определенной части компонента. Их основное отличие от псевдоклассов в том, что они не могут быть использованы для применения стиля элементу на основе его состояния. В синтаксисе псевдоэлементов используется продублированный знак «двоеточие» — (::).
Такого различия в синтаксисе не было в старых версиях CSS. Веб-браузеры поддерживают обычное не сдвоенное двоеточие для исходных псевдоэлементов, например, : before и : after. Таким образом обеспечивается поддержка устаревших обозревателей.
.my-element::before {
content: ‘Prefix — ‘;
}
В этом примере применение псевдоэлемента ::before позволяет сделать вставку содержимого в начало, а при помощи ::after — соответственно, в конец элемента.
Функционал псевдоэлементов гораздо шире. Они могут применяться для стилизации отдельных компонентов. допустим, перед вами стоит задача стилизовать маркированный список. При помощи ::marker имеется возможность изменить каждый номер.
/* меняем цвет маркера на зелёный */
li::marker {
color: green;
}
Другой псевдоэлемент ::selection позволяет применить стиль оформления к определенному выделенному пользователем фрагменту.
::selection {
background: grey;
color: yellow;
}
Составные селекторы
Составные селекторы – это комбинация, состоящая из нескольких selector CSS, которые разделены специальными символами. Таких комбинаторов четыре – пробел, знак больше ( > ), тильда ( ~) и плюс ( + ). Если вы хотите выбрать компоненты <a>, имеющих класс .my-class, применяйте следующий код:
a.my-class {
color: black;
}
В этом случае черный цвет будет применяться исключительно к элементу .my-class при условии, что он находится в <a>.
CSS селекторы потомков
В любом html документе каждый элемент связан с другими компонентами. Потомки – это элементы, находящиеся в рассматриваемом компоненте вне зависимости от их иерархических уровней.
.wraping p {
padding: 15px;
}
Дочерние селекторы CSS
Отличие дочерних селекторов css от контекстных состоит в том, что рассматривается только первый потомок, остальные игнорируются. Вложенные селекторы css предназначены для поиска элементов по уровню иерархии.
.wraping>p {
`padding: 15px;
}
Соседние селекторы CSS (сиблинги)
Это совокупность элементов, которые имеют одного родителя. Другими словами, сиблинги являются совокупностью элементов, расположенных на одном уровне иерархии.
h1 + p {
padding-bottom: 30px;
}
Группирование CSS селекторов
селектор в css правиле устанавливает стили (CSS свойства). Бывает так, что селекторы описывают идентичные правила. В этом случае их можно перечислить через запятую, при этом синтаксис выглядит так: selector1, selector2, selector3, … Пример:
h1 {
font-size: 24px;
font-weight: normal;
}
h2 {
font-size: 16px;
font-weight: Extra Bold;
}
h3 {
font-size: 18px;
font-weight: Extra Bold;
}
Точный инструмент «Колесо компетенций»
Для детального самоанализа по выбору IT-профессии
Список грубых ошибок в IT, из-за которых сразу увольняют
Об этом мало кто рассказывает, но это должен знать каждый
Мини-тест из 11 вопросов от нашего личного психолога
Вы сразу поймете, что в данный момент тормозит ваш успех
Регистрируйтесь на бесплатный интенсив, чтобы за 3 часа начать разбираться в IT лучше 90% новичков.
Только до 13 февраля
Осталось 17 мест
В примере показано, что правило стиля «насыщенность шрифта» — сверхжирное начертание используется селекторами h1, h2 и h3. Для минимизации кода их можно подвергнуть группировке:
h1, h2, h3 {
font-weight: Extra Bold;
}
h1 {
font-size: 24px;
}
h2 {
font-size: 16px;
}
h3 {
font-size: 18px;
}
Приоритизация селекторов
При наличии ряда правил, регламентирующих один и тот же стиль оформления какому-либо элементу, приоритет отдается самому «весомому» селектору.
Специфичность селекторов записывается посредством числового ряда из 4 позиций: 0,0,0,0.
Вес селектора усиливается слева направо. Если на первой позиции число больше, то этот селектор будет приоритетным, и стиль, заданный в нем и будет применяться к элементу. При равенстве чисел на позиции, сравнению подлежат следующие, расположенные правее и так далее.
Если числовой ряд полностью совпадает, то будет применяться тот селектор, который ниже расположен в коде.
Что означают числа на этих четырех позициях? Вес селектора зависит от его типа:
- селектор универсальный (без добавления веса) – 0,0,0,0;
- селекторы по элементу выглядят так – 0,0,0,1;
- селекторы по классу и по атрибуту смещают единицу на третью позицию – 0,0,1,0;
- селектор по id – 0,1,0,0;
Атрибут style элемента, содержит наиболее специфичные свойства, поэтому единица занимает самое приоритетную (левую) позицию – 1,0,0,0.
Пример:
* – 0,0,0,0;
li – 0,0,0,1;
li::before – 0,0,0,2;
ul > li – 0,0,0,2;
div input+label – 0,0,0,3;
h1 + div[data-target] – 0,0,1,2;
.btn.show – 0,0,2,0;
ul li a.item – 0,0,1,3;
#aside div.show – 0,1,1,1;
style=»…» – 1,0,0,0;
Можно вручную повысить вес CSS стиля, для этого надо прописать оператор !important, который сделает селектор более специфичным. Если же написать два таких слова, то возникнет конфликт, который решается сравнением весов селекторов.
Читайте также
Например:
<div class=»alert-warning» style=»background-color: black;»> … </div>
В CSS:
.alert-warning {
background-color: white !important;
}
Этот пример иллюстрирует приоритетность правила со словом !important. Цвет фона будет белым.
Как уже говорилось выше, применение !important к нескольким элементам запустит механизм определения приоритетного свойства CSS путем сравнения веса селекторов.
Будет применен тот стиль, который описывается селектором с большим приоритетом.
Если же добавить !important к CSS свойству расположено в style, у которого и так наивысший приоритет, то эффект специфичности станет максимальным, и будет производиться выполнение этого стиля.
Приведем пример:
<p id=»message» style=»font-size: 22px !important;»>…</p>
CSS:
p#message {
font-size: 14px !important;
}
Этот пример иллюстрирует, что к элементу #message будет применен стиль «размер шрифта» со значением 22px, потому что вес Style (1.0.0.0) имеет наивысший приоритет, а слова !important в данном случае уравниваются.
В CSS отсутствует селектор для получения родительского элемента. Возможно, в следующей версии CSS появится такая фича, но в текущей CSS3 такого выбора нет.
Надеемся, что в этой статье вы получили полезный практический опыт применения с CSS селекторов. Все эти методы предназначены для удобства указания определенных html-элементов для применения к ним различный стилей оформления.
- Назад
- Обзор: Building blocks
- Далее
В CSS-селекторы используются для стилизации HTML элементов на веб-странице. Существует широкий выбор CSS-селекторов, позволяющий максимально точно отбирать элементы для стилизации. В этой статье и её подстатьях мы в мельчайших подробностях рассмотрим разные их типы и увидим, как они работают.
| Необходимые знания: | Базовая компьютерная грамотность, основное программное обеспечение, понимание работы с файлами, базовые знания HTML (смотрите Введение в HTML), и представление о том, как работает CSS (смотрите Введение в CSS). |
|---|---|
| Цель: | Узнать, как работают CSS-селекторы. |
Что такое селекторы?
Вы уже встречались с селекторами. Это выражения, которые говорят браузеру, к какому элементу HTML нужно применить те или иные свойства CSS, определённые внутри блока объявления стиля.
Ранее вы встречали несколько разных селекторов и узнали, что существуют селекторы, которые по-разному относятся к документу, — например используя элемент h1 или класс .special.
В CSS селекторы определяются в спецификации CSS-селекторов; как и другие части CSS, нужно поддерживать их работу в браузерах. Большинство селекторов, которые вы встретите, определены в Спецификации селекторов 3 уровня, где вы сможете найти всю информацию о поддержке селекторов в браузерах.
Несколько селекторов
Несколько селекторов, использующих одни и те же таблицы стилей, можно объединить в лист селекторов: правило будет добавлено к каждому селектору. К примеру, у меня есть одинаковые правила для заголовка h1 и класса .special; я могу написать их так:
h1 {
color: blue;
}
.special {
color: blue;
}
А могу написать короче — просто отделив селекторы запятыми:
h1, .special {
color: blue;
}
Пробел можно вставлять до или после запятой. Ещё удобнее писать каждый селектор с новой строки:
h1,
.special {
color: blue;
}
В упражнении ниже объедините два селектора в одном правиле. Результат должен остаться таким же.
При объединении селекторов таким образом, при условии если хоть один селектор будет недействительным, всё правило будет пропущено.
В примере ниже правило для селектора класса не будет работать, в то время как h1 будет стилизован.
h1 {
color: blue;
}
..special {
color: blue;
}
Но если мы объединим селекторы, правило не применится ни к h1, ни к классу: оно считается недействительным.
h1, ..special {
color: blue;
}
Типы селекторов
Понимание того, какой именно селектор вам нужен, очень помогает подобрать подходящий элемент. Сейчас мы разберём разные виды селекторов.
Селекторы тегов, классов и идентификаторов
К этой группе относятся селекторы HTML-элементов, таких как <h1>.
К группе относятся и селекторы классов:
или селекторы идентификаторов (ID):
Селекторы атрибутов
Эта группа селекторов позволяет выбирать селекторы, основываясь на наличии у них конкретного атрибута элемента:
или основываясь на значении атрибута:
a[href="https://example.com"] { }
Псевдоклассы, псевдоэлементы
К этой группе относятся псевдоклассы, которые стилизуют определённое состояние элемента. Псевдокласс :hover, например, применяет правило, только если на элемент наведён курсор мыши
К группе ещё относятся псевдоэлементы, которые выбирают определённую часть элемента (вместо целого элемента). Например, ::first-line всегда выбирает первую строку внутри элемента (абзаца <p> в нашем случае), действуя, как если бы тег <span> оборачивал первую строку, а затем был стилизован.
Комбинаторы
И последняя группа селекторов: она позволяет объединять селекторы, чтобы было легче находить конкретные элементы внутри документа. В следующем примере мы отыскали дочерний элемент <article> с помощью комбинатора дочерних элементов (>):
Продолжение
Ниже можно просмотреть таблицу различных видов селекторов с соответствующими ссылками, или вы можете двинуться дальше: нас ждут селекторы тегов, классов и идентификаторов.
- Назад
- Обзор: Building blocks
- Далее