Хотел бы поподробнее узнать про псевдоклассы и подобные. Можно ли как-то с помощью них выделять 2, 3, 4... т.д элементы? Ну, например, есть 4 diva с классом .example и мне нужно применить какие-либо стили к нему. Можно ли сделать так без создания дополнительных id и классов?
1 ответ
Можно, используйте псевдокласс :nth-child
:
.example:nth-child(1) {
// стили
}
.example:nth-child(2) {
// стили
}
.example:nth-child(3) {
// стили
}
.example:nth-child(4) {
// стили
}
UPD. Добавил пример:
.example {
margin-bottom: 10px;
border-bottom: 1px solid #ccc;
}
.example:nth-child(1) {
color: red;
}
.example:nth-child(2) {
color: green;
}
.example:nth-child(3) {
color: blue;
}
.example:nth-child(4) {
color: purple;
}
p,
h1 {
color: #000000;
}
<div class="example">
Див №1
<p>Дочерний элемент со своим цветом</p>
</div>
<div class="example">
Див №2
<h1>Дочерний элемент со своим цветом</h1>
</div>
<div class="example">
Див №3
<h3>Дочерний элемент с наследованием</h3>
</div>
<div class="example">
Див №4
<h4>Дочерний элемент с наследованием</h4>
</div>
-
Про это слышал... Но почему-то при верстке выделяются не те элементы, которые мне нужны. Выделяются дочерние элементы (например, в каждом из 4-х дивов есть какие-либо h1, p - они и выделяются).– Андрей3 июн 2016 в 5:17
-
-
@MasterAlex, поправьте :nth-child. @Андрей, всё зависит от разметки. Иногда
:nth-child
, иногда:nth-of-type
, а иногда и к родительским элементам нужно применять псевдокласс, а не непосредственно к тем элементам, к которым собираетесь применять свойства CSS.– Deonis3 июн 2016 в 5:32 -
@Андрей, дочерние элементы наследуют некоторые стили родителя, если эти стили у них отсутствуют в css, добавил в ответ показательный пример. 3 июн 2016 в 5:37
-