0

Хотел бы поподробнее узнать про псевдоклассы и подобные. Можно ли как-то с помощью них выделять 2, 3, 4... т.д элементы? Ну, например, есть 4 diva с классом .example и мне нужно применить какие-либо стили к нему. Можно ли сделать так без создания дополнительных id и классов?

1 ответ 1

0

Можно, используйте псевдокласс :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>

6
  • Про это слышал... Но почему-то при верстке выделяются не те элементы, которые мне нужны. Выделяются дочерние элементы (например, в каждом из 4-х дивов есть какие-либо h1, p - они и выделяются). 3 июн 2016 в 5:17
  • @Андрей покажите свой код (css и html)
    – Alexey Ten
    3 июн 2016 в 5:29
  • @MasterAlex, поправьте :nth-child. @Андрей, всё зависит от разметки. Иногда :nth-child, иногда :nth-of-type, а иногда и к родительским элементам нужно применять псевдокласс, а не непосредственно к тем элементам, к которым собираетесь применять свойства CSS.
    – Deonis
    3 июн 2016 в 5:32
  • @Андрей, дочерние элементы наследуют некоторые стили родителя, если эти стили у них отсутствуют в css, добавил в ответ показательный пример.
    – MasterAlex
    3 июн 2016 в 5:37
  • @Deonis, да-да, исправил уже, когда пример делал :)
    – MasterAlex
    3 июн 2016 в 5:38

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.