Anexo: Ejemplos de aplicación de los selectores de CSS 2.1

En este caso se aplica la siguiente regla:

    div{
        font-style:italic;
    }
                

Afecta exclusivamente al texto dentro de un div.

De los dos párrafos siguiente, el primero cuenta con id="primer_parrafo". Se selecciona con la regla:

    #primer-parrafo{
        font-weight:bold;
    }
                

En la siguiente lista, los elementos pares han sido marcados con class="par". Se aplica:

    .par{
        background-color:#FF0;
    }
                

Para este caso, el estilo se aplica sólo a los párrafos que están anidados en el blockquote:

    blockquote p{
        border:1px solid;
    }
                

Tenemos un div con id="contenedor" con varios párrafos anidados en su interior, el segundo de ellos anidado además en otro div. La regla siguiente:

    #contenedor>p{
        font-variant:small-caps;
    }
                

aplica versalitas a los párrafos primero y tercero, que son hijos directos, pero no al segundo, aunque sea un descendiente de contenedor.

Como ejemplo, tenemos una lista, un párrafo y otra lista. Con la siguiente regla

    p+ul{
        border:1px solid;
    }    
                

sólo la segunda lista debe tener un border alrededor.

A los párrafos de este ejemplo se les ha aplicado class="primera-clase" y class="segunda-clase" respectivamente. Pero como vamos a seleccionar el atributo independientemente de su valor, ambos deberían aparecer en cursiva.

    p[class]{
        font-style:italic;
    }    
                

Las dos imágenes siguientes cuentan con atributo width, pero una con un valor de 100 y otra con uno de 50. La regla siguiente selecciona sólo la segunda:

    img[width="50"]{
        border:5px solid;
    }
                

Tenemos cuatro párrafos, uno con class="cursiva", otro con class="negrita", otro con class="subrayado" y otro con class="cursiva negrita subrayado". Con las siguientes reglas:

    .cursiva{
        font-style:italic;
    }        
    
    .negrita{
        font-weight:bold;
    }
        
    p[class~="subrayado"]{
        text-decoration:underline;
    }    
                

El primer párrafo aparecerá en cursiva y el segundo en negrita. El cuarto debería aparecer en cursiva, negrita, y además subrayado. Pero el tercero no debería aparecer en cursiva, dado que el selector dice que se aplique el estilo si es uno entre varios de los valores del atributo, no un valor único.

Los siguientes vínculos cuentan con hreflang="es", hreflang="es-ES" y hreflang="es-MX" respectivamente. La regla

    a[hreflang|="es"]{
        color:#060;
        font-weight:bold;
    }
                

debería hacer aparecer en verde y negrita sólo los dos últimos.