.red p {
  color: red;
}

.blue p {
  color: blue;
}
<div class="blue">
  <p> first </p>
  <div class="red">
    <p> second </p>
  </div>
</div>

Asumí que el primero habría sido azul y el segundo como rojo, pero ese no es el caso. ¿Por qué ambos párrafos son azules?

3
Sierra 8 sep. 2018 a las 06:58

3 respuestas

La mejor respuesta

Ambos párrafos son azules debido a la "C" en CSS, que significa cascada. Revise el documentos MDN para ver cómo se aplican las reglas CSS y heredado

En su caso, todos los elementos <p> son azules porque el selector .blue p es la última regla en su CSS y anula el selector .red p.

Puede reestructurar su CSS de esta manera para asegurarse de que los elementos <p> dentro del div .red sean rojos.

.blue p {
  color: blue;
}

.blue .red p {
  color: red;
}
5
Tom 8 sep. 2018 a las 04:43

Porque le has dado color azul al div padre. Esta debería ser tu estructura.

<div class="blue">
 <p>first</p>
</div>
<div class="red">
 <p>second</p>
</div>

El código CSS será:

.red {
  color: red;
}

.blue {
  color: blue;
}
0
AKNair 8 sep. 2018 a las 04:16

Como sabes:

  • .blue p coincide con cualquier etiqueta p dentro de una clase .blue.
  • .red p coincide con cualquier etiqueta p dentro de una clase .red.

Su <p> first </p> está dentro de una clase azul, por lo que coincide con la regla .blue p y se representa como azul.

<div class="red"> está dentro de una clase roja y una clase azul, por lo que tenemos un dilema. La forma en que CSS resuelve esto es mediante el uso de la regla que apareció por última vez. En este caso, la regla .blue p aparece en último lugar y el texto se representa en azul.

Corrección de CSS

Si las etiquetas p siempre serán un elemento secundario inmediato de sus clases de color, puede hacer lo siguiente. El > es un selector descendiente que solo coincide con descendientes inmediatos.

.red > p {
  color: red;
}

.blue > p {
  color: blue;
}

CSS fix 2

También puede hacer lo que Tom sugirió. La razón por la que funciona es porque las reglas CSS que son más específicas sobrescribirán las reglas CSS que son menos específicas. Aunque la regla azul ocupa el segundo lugar porque div .red p tiene dos clases, es más específica que .blue p.

.red p,
.blue .red p {
  color: red;
}

.blue p,
.red .blue p {
  color: blue;
}

Sin embargo, esto solo lleva su problema un nivel más profundo. La clase roja en el siguiente HTML seguirá siendo azul.

<div class="blue">
  <div class="blue">
    <p> first </p>

    <div class="red">
      <p> second </p>
    </div>

  </div>
</div>

Corrección de HTML

Este es el método que sugeriría que use. Simplemente puede mover sus clases a las etiquetas p:

<div>
  <p class="blue"> first </p>
  <div>
    <p class="red"> second </p>
  </div>
</div>

Otros elementos a tener en cuenta

Hay otras formas en que una regla CSS puede anularse. Le sugiero que investigue especificidad CSS.

3
wp-overwatch.com 8 sep. 2018 a las 05:52