Grades and other

[morde]

I'd like to know more about pseudo class and stuff. Is there any way they can allocate 2, 3, 4... that's the elements? Well, for example, there's four divas with a class of .example, and I need to use some style to him. Can we do this without additional ids and classes?

[Saumya]

Let's use pseudos. :nth-child:

.example:nth-child(1) {
  // стили
}
.example:nth-child(2) {

// стили

}
.example:nth-child(3) {

// стили

}
.example:nth-child(4) {

// стили

}

UPD. Added an example:

.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>