All geek questions in one place

How do Chrome dev tools generate CSS selector?

When adding a new style rule for an element, the selector that Chrome generates contains the entire hierarchy instead of the class name.

For instance:

<body>
      <div class="container">
           <span class="helper"></span>
      </div>
</body>

Adding a new style rule to .helperwill create a type selector body > div > spaninstead of just .helper. Why is this?

+4
source share
2 answers

, . , , DOM, , , .

- , , , span, , HTML. , NichoDiaz, , : a .helper body > div > span, body > div > div > span, .

, , helper ( DOM ), , . , span, div, body, body > div > span , , (, , body > html > body >, , body html, .)

, span . , , :nth-child(1) , , .

span , , body > div > span:nth-child(1). .helper, :nth-child(1), body > div > span.helper, , .

+3

, . , , . , css .

, , , <span class"helper">, div parent body.

, body div

jsfiddle

- . !important, color span class .

<body>
      <div class="container">
           <span class="helper">I am being applied</span>
          <div>
              <span class="helper">I am helper but i am not red</span>
          </div>    
      </div>
</body>

body > div > span {
    color: red !important;
}
.helper { color: green }
0

Source: https://habr.com/ru/post/1531948/

More articles:


All Articles