div p {background-color: yellow}
Párrafo 1 dentro del div.
Párrafo 2 dentro del div.
Párrafo 3 dentro del div.
Párrafo 4. Fuera del div.
Párrafo 5. Fuera del div.
Lenguaje CSS3
<div id="div1">
<p>Párrafo 1 dentro del div.</p>
<p>Párrafo 2 dentro del div.</p>
<span><p>Párrafo 3 dentro del div.</p></span>
</div>
<p>Párrafo 4. Fuera del div.</p>
<p>Párrafo 5. Fuera del div.</p>
div > p {background-color: yellow}
Se aplica a los párrafos descendientes directos de div. El párrafo 3 no se pinta porque está dentro de un span.
Párrafo 1 dentro del div.
Párrafo 2 dentro del div.
Párrafo 3 dentro del div.
Párrafo 4. Fuera del div.
Párrafo 5. Fuera del div.
div + p {background-color: yellow}
Se pintan los selectores inmediatamente después del div.
Párrafo 1 dentro del div.
Párrafo 2 dentro del div.
Párrafo 3. Fuera del div.
Párrafo 4. Fuera del div.
div ~ p {background-color: yellow}
Selecciona todos los elementos que son hermanos posteriores del elemento especificado.
Párrafo 1.
Un poco de código.
Párrafo 2.
Párrafo 3.
Un poco de código.
Párrafo 4.
Un pseudo-elemento CSS se utiliza para aplicar estilo a partes específicas de un elemento. Por ejemplo:
Puedes usar el pseudo-elemento ::first-line para añadir un efecto especial a la primera línea de un texto. Un poco más de texto. E incluso más, y más, y más...
¡Puedes usar el pseudo-elemento ::first-letter para añadir un efecto especial al primer carácter de un texto!
Esto es una introducción.
Este es un párrafo con algo de texto. Incluso un poco más de texto.