Selector de hijo de CSS
- Página anterior Selector de descendiente de CSS
- Página siguiente Selector de hermano adyacente de CSS
En comparación con el selector de descendientes, el selector de subelementos (Child selectors) solo puede seleccionar elementos que son subelementos de algún elemento.
Selector de subelementos
Si no desea seleccionar elementos descendientes aleatorios, sino que desea reducir el rango y solo seleccionar los subelementos de algún elemento, utilice el selector de subelementos (Child selector).
Por ejemplo, si desea seleccionar solo los elementos strong que son subelementos de un elemento h1, puede escribirlo así:
h1 > strong {color:red;}
Esta regla cambiará los dos elementos strong debajo del primer h1 a rojo, pero el strong dentro del segundo h1 no se verá afectado:
<h1>Esto es <strong>very</strong> <strong>very</strong> importante.</h1> <h1>Esto es realmente <em>muy <strong>importante</strong></em>.</h1>
Explicación de la sintaxis
Debería haber notado que el selector de hijo utiliza el símbolo de mayor que (operador de hijo).
Los espacios en blanco entre los símbolos del operador de hijo pueden estar presentes, lo que es opcional. Por lo tanto, cualquier una de las siguientes formas es correcta:
h1 > strong h1> strong h1 >strong h1>strong
Si se lee de derecha a izquierda, el selector h1 > strong puede interpretarse como "Todos los elementos strong que son elementos hijos de h1".
Combinación de selector de descendiente y selector de hijo
Vea el siguiente selector:
table.company td > p
Este selector seleccionará todos los elementos p que son elementos hijos de td, el cual se hereda del elemento table que tiene una clase que contiene company.
- Página anterior Selector de descendiente de CSS
- Página siguiente Selector de hermano adyacente de CSS
