Selectores avanzados: aprender HTML

Hay muchos selectores especiales en CSS que nos permiten consultar una lista de elementos utilizando métodos avanzados.

Selectores de niños

Los selectores secundarios nos permiten seleccionar un conjunto específico de elementos secundarios de un elemento de acuerdo con su orden interno.

primer hijo, último hijo

Para seleccionar el primer y último hijo contenido dentro de un elemento padre, use los selectores: primer hijo y: último hijo. Aquí hay un ejemplo:

<style>
li:first-child {
    color: blue;
}

li:last-child {
    color: green;
}
</style>
<ul>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
    <li>Fourth item</li>
</ul>

Para asegurarnos de que seleccionamos solo <li> elementos dentro de un <ul> elemento, podemos usar un selector relacional:

<style>
ul li:first-child {
    color: blue;
}

ul li:last-child {
    color: green;
}
</style>
<ul>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
    <li>Fourth item</li>
</ul>

nth-child y nth-last-child

De manera similar al primer hijo y al último hijo, podemos seleccionar usando un desplazamiento fijo desde el principio y el final de la lista de hijos del contenedor principal. Eche un vistazo al siguiente ejemplo:

<style>
ul li:nth-child(2) {
    color: blue;
}

ul li:nth-last-child(2) {
    color: green;
}
</style>
<ul>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
    <li>Fourth item</li>
</ul>

primero de tipo y último de tipo

El selector de primer tipo es muy similar al selector de primer hijo, solo que es menos restrictivo: solo mira los elementos de su tipo en contraposición al selector de primer hijo.

<style>
ul li:first-child {
    color: blue;
}

ul li:first-of-type {
    color: red;
}

ul li:last-of-type {
    color: green;
}
</style>
<ul>
    <dl><dt>First descriptive list item</dt></dl>
    <li>First regular list item</li>
    <li>Second regular list item</li>
    <li>Third regular list item</li>
    <li>Fourth regular list item</li>
</ul>

Observe cómo la primera regla CSS para colorear el primer hijo li en azul no hace nada, ya que solo se aplicará al primer elemento hijo, que también es un <li> elemento. Este ejemplo también muestra que el selector de primero de tipo suele ser menos útil que su contraparte de primero de tipo.

nth-of-type y nth-last-of-type

De manera similar a la sección anterior, nth-of-type y nth-of-last-type también es menos restrictivo al contar elementos similares a su tipo, pero también permite seleccionar un elemento usando un desplazamiento fijo desde el inicio o el final del lista.

<style>
ul li:nth-child(2) {
    color: blue;
}

ul li:nth-of-type(2) {
    color: red;
}

ul li:nth-last-of-type(2) {
    color: green;
}
</style>
<ul>
    <dl><dt>First descriptive list item</dt></dl>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
    <li>Fourth item</li>
</ul>

hijo único y único de tipo

El selector: only-child solo seleccionará un elemento si no tiene ningún hermano contenido dentro de su elemento padre. El: only-of-type es similar, solo que solo considerará elementos del mismo tipo que él.

Echemos un vistazo a ambos en acción:

<style>
ul dl:only-child {
    color: red;
}

ul li:only-of-type {
    color: blue;
}
</style>

<ul>
    <dl><dt>Only descriptive list item in the list</dt></dl>
    <li>Only list item in the list</li>
</ul>

Observe cómo en este ejemplo el selector de hijo único no logra colorear el <dl> elemento en lectura debido a la presencia del <li> elemento como hermano. Sin embargo, para el selector único de tipo, tener un <dl> elemento como hermano no es un problema, ya que no hay otros <li> elementos contenidos dentro del mismo padre.

Selectores de jerarquía

selector vacío

El selector: vacío se aplica solo a los elementos que están vacíos y contienen solo espacios en blanco y / o comentarios HTML. Echemos un vistazo a un ejemplo:

<style>
ul li {
    background-color: #cff;
}

ul li:empty {
    background-color: #fcf;
}
</style>
<ul>
    <li>First item</li>
    <li>Second item</li>
    <li></li>
    <li>Fourth item</li>
</ul>

Selectores de hermanos adyacentes (+ y ~)

Selectores especiales

El selector universal

El no selector

Selectores de atributos

Selector de atributos básicos

Atributo igual al selector de valor (=)

El atributo contiene el selector de valor (~ = y * =)

El atributo comienza con selectores (| = y ^ =)

El atributo termina con selector ($ =)

Ejercicio

Esta página aún no tiene un ejercicio. Le invitamos a contribuir con uno enviándome una solicitud de extracción: