CSS pseudo-selectors do not work

Question

CSS pseudo-selectors do not work

Navigation

#1 by (1 votes)

1

I'm trying to make two lines with some features, with the class line. When I try to apply a different style to the second line, using the pseudo-selectors does not work.

.linea{
    position: relative;
    width: 40%;
    height: 3px;
    background-color: orange;
    left: 00px;
    display: block;
}

The idea is to change the color and margin. I tried the selectors: . Line: last-child and .linea: nth-child (2) and it does not work with either one.

Say that it is a div, and that they are not inside any other container, directly in the body of the document.

css3 css

asked by Jogofus 02.05.2017 в 02:16

source

1 answer

java.lang.ClassCastException: java.lang.String can not be cast to Data.Locality Error "Fatal error exception, syntax error unspected 'if' (T_IF)" when executing a PHP [closed]

score 1 · Answer 1

According to the level 3 specification of css, for the pseudoclass% co_of% to work, there must be a container element of the selector to which it is applied.

In theory the same principle applies for :last-child

.linea {
    position: relative;
    width: 40%;
    height: 30px;
    background-color: orange;
    left: 0;
    display: block;
}

.linea:last-child {
  background-color: green;
}

.linea:nth-child(2) {
  background-color: blue;
}

<div>
  <div class="linea">Línea 1</div>
  <div class="linea">Línea 2</div>
  <div class="linea">Línea 3</div>
  <div class="linea">Línea 4</div>
  <div class="linea">Línea 5</div>
</div>

If there are other elements than those covered by the selector, apparently the "pseudoclass" stops working, but it is not, it is simply being used incorrectly according to the CSS specification, since :nth-child was created to select the last element of a certain level, not to apply to the last element of a specific class as you intend to do:

.linea {
    position: relative;
    width: 40%;
    height: 30px;
    background-color: orange;
    left: 0;
    display: block;
}

.linea:last-child {
  background-color: green;
}

.linea:nth-child(2) {
  background-color: blue;
}

<div>
  <div class="linea">Línea 1</div>
  <div>Texto</div>
  <div class="linea">Línea 2</div>
  <div class="linea">Línea 3</div>
  <div>Texto</div>
  <div class="linea">Línea 4</div>
  <div>Texto</div>
  <div class="linea">Línea 5</div>
  <div>Más texto</div>
</div>