Selectores de niños. Selectores css secundarios y contextuales css seleccionar elementos secundarios

Primer hijo

Segundo hijo

Tercer hijo

Último niño

,

La primera regla, p: primer hijo, se refiere al elemento p: si es el primer hijo de su padre, luego se le aplica un estilo (en nuestro caso es negrita y convierte el texto a mayúsculas). Si en el código HTML dado inmediatamente después de la etiqueta de apertura

Para definir el estilo de los elementos impares, el valor "impar" se pasa al selector:

Tr: n-ésimo hijo (impar) ()

Para diseñar elementos pares, el valor "par" se pasa al selector:

Tr: nth-child (par) ()

También podemos pasar el número del elemento a diseñar a este selector:

Tr: nth-child (3) (color de fondo: #bbb;)

En este caso, se está aplicando estilo a la tercera línea.

Otra posibilidad es utilizar un marcador de posición para el número, que se expresa con la letra n:

Tr: nth-child (2n + 1) (color de fondo: #bbb;)

Aquí, el estilo se aplica a cada segunda línea impar.

El número antes de n (en este caso 2) representa el siguiente niño que se resaltará. El número que sigue al signo más indica desde qué elemento comenzar la selección, es decir, +1 significa comenzar desde el primer elemento secundario.

Por lo tanto, en este caso, la selección comienza con el primer elemento y el siguiente es 2 * 1 + 1 = tercer elemento, luego 2 * 2 + 1 = quinto elemento, y así sucesivamente.

Por ejemplo, si queremos seleccionar cada tercer elemento, comenzando con el segundo, entonces podríamos escribir:

Tr: nth-child (3n + 2) (color de fondo: #bbb;)

La pseudoclase: nth-last-child esencialmente proporciona la misma funcionalidad, excepto que los elementos no se cuentan desde el principio, sino desde el final:

Tr: nth-last-child (2) (background-color: #bbb; / * 2 línea desde el final, es decir, la penúltima * /) tr: nth-last-child (2n + 1) (background-color : #eee; / * líneas impares comenzando desde el final * /)

Pseudoclase de tipo Nth-of-type

La pseudoclase: nth-of-type le permite seleccionar un hijo de un tipo específico por un número específico:

Tr: n-ésimo de tipo (2) (color de fondo: #bbb;)

La pseudoclase nth-last-of-type funciona de manera similar, solo que ahora los elementos se cuentan desde el final:

Tr: nth-last-of-type (2n) (color de fondo: #bbb;)

• La tarea que se realiza es la selección de niños.
• Designación - encadenamiento: selector de padre simple, combinador ">", selector de hijo simple.
• Ejemplo de uso:

Establezcamos la sangría izquierda para la lista anidada directamente en el elemento con la clase de contenido (estas reglas no afectarán las listas del segundo nivel de anidación):

Contenido> ul (margen izquierdo: 20px;)

Más sobre el selector de niños

La principal diferencia entre el selector de niños y el que se discutió anteriormente es el hecho de que si el selector de niños selecciona todos los descendientes, independientemente del nivel de anidamiento, entonces el selector de hijos selecciona solo los descendientes de primer nivel, es decir, elementos directamente anidados. Por ejemplo, escribamos esto:

Div> span (color: # 555; / * gris * /)

... y este código:

Los selectores de CSS secundarios son selectores que se utilizan para aplicar estilos a elementos solo cuando son secundarios de otros elementos (principales). Al igual que los selectores descendientes, los selectores secundarios son compuestos y están formados por selectores simples (clases, identificadores, etc.).

Nuevamente, si ha olvidado qué son los elementos secundarios, recordemos analizando un ejemplo que ya le es familiar.

<тег1> <тег2>... <тег3><тег4>...

Un elemento se llama hijo de otro elemento si está dentro de él en el primer nivel de anidamiento. En nuestro ejemplo<тег2>y<тег3>son hijas<тег1>, a<тег4>- esta es una hija<тег3> .

Los selectores secundarios constan de dos o más selectores simples separados por ">", donde el padre se indica primero, luego su hijo, luego el hijo de este hijo, y así sucesivamente. Es decir, como en los selectores descendientes, se especifica la ruta del árbol del documento. Los estilos se aplicarán solo a aquellos elementos cuyos selectores sean los últimos en la lista. Sintaxis general:

selector1> selector2 (

Los espacios a ambos lados del letrero ">" se pueden usar o no, si se desea.

Ejemplo usando selectores secundarios de CSS

Resultado en el navegador

Párrafo 1.

Párrafo 2.

En este ejemplo, debe prestar atención a dos puntos. Aquí hay tres elementos, pero solo dos de ellos tienen bordes, relleno y márgenes. ¿Por qué? Y el segundo punto. Solo el primer párrafo tiene un color de texto azul.

Internet Explorer 6.0 no comprende los selectores de niños, por lo que si está creando su sitio con este antiguo navegador en mente, téngalo en cuenta.

Selectores secundarios en tablas HTML

Muchos novatos (y a veces ya no novatos) en la creación de sitios enfrentan ciertos problemas cuando usan selectores secundarios en tablas HTML. Para que entiendas lo que en cuestión, echemos un vistazo a una tabla tan común.

Y ahora una pregunta. ¿Qué debe hacer si necesita navegar desde una etiqueta a celdas usando selectores secundarios? Si decides escribir así, entonces está mal:

tabla> tr> td ( El valor de la propiedad; El valor de la propiedad; ...)

¿Puedes adivinar por qué está mal? ¿No? El hecho es que se olvidó de un elemento más, que, incluso si no se especifica explícitamente, sigue estando presente de manera invisible en cada tabla HTML. Simplemente no tiene las etiquetas de apertura y cierre requeridas, por lo que a menudo se pasa por alto. Por cierto, sí, en Tutorial HTML no lo revisamos con usted, porque en realidad su indicación explícita rara vez es necesaria. Bueno, creo que ya adivinaste lo que será entrada correcta, pero te lo mostraré de todos modos.

tabla> tbody> tr> td ( El valor de la propiedad; El valor de la propiedad; ...)

Por cierto, no solo las tablas tienen elementos con etiquetas de apertura opcionales, también existen tales elementos. Es solo que, en la práctica, los "problemas de olvido" surgen con mayor frecuencia con las tablas, por eso llamé su atención sobre esto.

Tarea.

1. Instale la fuente Arial 0.9em y algunos antecedentes en la página.
2. Escriba algunos títulos y párrafos en la página, cambie el tamaño y el color del texto de los títulos como mejor le parezca.
3. Haga que los enlaces directamente en los párrafos de la página sean azules sin subrayar. Pero al mismo tiempo, si los enlaces están enmarcados adicionalmente con cualquier etiqueta, por ejemplo, en cursiva, entonces deben mostrarse subrayados y en rojo. Una vez más, llamo su atención sobre el hecho de que no necesita escribir estilos de enlace con cada etiqueta de encuadre por separado, hágalo universalmente. ¿Cómo? Piénsalo.
4. Cree un pequeño menú en el lado derecho de la página y arréglelo, para esto necesita una propiedad y un par de otras propiedades relacionadas, lo resolverá allí. Al mismo tiempo, deje que el menú no solo permanezca en su lugar dentro de la ventana del navegador, sino que tampoco se arrastre sobre el contenido de la página cuando se desplaza.

Creo que el último punto de la lección será el más difícil para ti, pero no trates de sumergirte por completo en dominar el posicionamiento de inmediato. Solo haz tu tarea. Por cierto, este elemento no funcionará en Internet Explorer 6.0, ya que el anciano no comprende el posicionamiento fijo.