Grades and other



  • 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?



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


Log in to reply
 


Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2