Cómo funciona nth-child: estándares web. Cómo funciona el selector CSS enésimo hijo

La pseudoclase :nth-child se utiliza para agregar estilo a los elementos según la numeración en el árbol de elementos.

Designaciones

	Descripción	Ejemplo
<тип>	Indica el tipo de valor.	<размер>
A && B	Los valores deben generarse en el orden especificado.	<размер> && <цвет>
Un | B	Indica que es necesario seleccionar solo un valor de los propuestos (A o B).	normales | pequeñas capitalizaciones
Un || B	Cada valor se puede utilizar de forma independiente o junto con otros en cualquier orden.	ancho || contar
	Valores de los grupos.	[ cultivo || cruz ]
*	Repita cero o más veces.	[,<время>]*
+	Repita una o más veces.	<число>+
?	El tipo, palabra o grupo especificado es opcional.	¿recuadro?
(A, B)	Repita al menos A, pero no más de B veces.	<радиус>{1,4}
#	Repita una o más veces separadas por comas.	<время>#

×

Valores

impar Todos los números de elementos impares. par Todos los elementos pares.<число>El número ordinal del elemento hijo en relación con su padre. La numeración comienza desde 1, este será el primer elemento de la lista.<выражение>Se especifica en la forma an±b, donde a y b son números enteros, y n es un contador que automáticamente toma el valor 0, 1, 2...

Si a es cero, entonces no se escribe y la entrada se abrevia como b. Si b es cero, tampoco se especifica y la expresión se escribe en la forma an. a y b pueden ser números negativos, en cuyo caso el signo más cambia a un signo menos, por ejemplo: 5n-1.

Al utilizar valores a y b negativos, algunos resultados también pueden ser negativos o cero. Sin embargo, los elementos solo se ven afectados por valores positivos debido a que la numeración de elementos comienza en 1.

en la mesa 1 muestra algunas posibles expresiones y palabras clave, y también indica qué números de elementos se utilizarán.

Mesa 1. Resultado para diferentes valores de pseudoclase

Significado	Números de artículo	Descripción
1	1	El primer elemento es sinónimo de la pseudoclase: primer hijo.
5	5	Quinto elemento.
2n	2, 4, 6, 8, 10,…	Todos los elementos pares, análogos al valor par.
2n+1	1, 3, 5, 7, 9,…	Todos los elementos impares, análogos al valor impar.
3n	3, 6, 9, 12, 15,…	Cada tercer elemento.
3n+2	2, 5, 8, 11, 14,…	Cada tercer elemento, a partir del segundo.
n+4	4, 5, 6, 7, 8,…	Todos los elementos excepto los tres primeros.
-n+3	3, 2, 1	Los tres primeros elementos.
5n-2	3, 8, 13, 18, 23,…	—
incluso	2, 4, 6, 8, 10,…	Todos los elementos pares.
extraño	1, 3, 5, 7, 9,…	Todos los elementos extraños.

Es posible combinar dos pseudoclases :nth-child para seleccionar una variedad de elementos. Todos los elementos del dos al cinco se seleccionarán aquí.

:n-ésimo-hijo(n+2):n-ésimo-hijo(-n+5) (…)

Ejemplo

	2134	2135	2136	2137	2138
Aceite	16	34	62	74	57
Oro	4	69	72	56	47
Árbol	7	73	79	34	86
piedras	23	34	88	53	103

En este ejemplo, la pseudoclase :nth-child se utiliza para cambiar el estilo de la primera fila de la tabla, así como para resaltar todas las filas pares (Fig. 1).

Arroz. 1. Aplicar la pseudoclase:nth-child a las filas de la tabla

Especificación

Cada especificación pasa por varias etapas de aprobación.

• Recomendación: la especificación ha sido aprobada por el W3C y se recomienda como estándar.
• Recomendación del candidato ( Posible recomendación) - el grupo responsable del estándar está satisfecho de que cumple sus objetivos, pero requiere ayuda de la comunidad de desarrollo para implementar el estándar.
• Recomendación propuesta Recomendación sugerida) - en esta etapa el documento se envía al Consejo Asesor del W3C para su aprobación final.
• Borrador de trabajo: una versión más madura de un borrador que ha sido discutido y modificado para revisión de la comunidad.
• Borrador del editor ( Borrador editorial) - una versión borrador del estándar después de que los editores del proyecto realizaron cambios.
• Borrador ( Borrador de especificación) - el primer borrador de la norma.

×

La pseudoclase del primer hijo en CSS se utiliza para seleccionar el primer elemento en un contenedor. En este caso, no se tiene en cuenta el tipo específico del elemento; sólo importa su posición con respecto al padre. Hay algunas sutilezas en el funcionamiento de este selector que se deben comprender para poder utilizarlo correctamente.

Pseudoclases CSS

Junto con los identificadores, clases, etiquetas y atributos, las pseudoclases son un tipo de selector de CSS. Su peculiaridad es que no se pueden instalar directamente en HTML.

Ejemplos de pseudoclases son "primera línea del contenedor", "primera letra de la palabra", "primer hijo del padre". El navegador puede detectar dichos elementos solo después de haber analizado la página y compilado el árbol DOM y, en algunos casos, solo después de renderizar.

La presencia de un mecanismo similar en CSS le permite definir un diseño que no está vinculado al código HTML, lo que abre grandes oportunidades de diseño.

Seleccionando el primer elemento

La pseudoclase del primer hijo en CSS es responsable de seleccionar el primer elemento en el contenedor principal. Los nodos de texto se ignoran, solo se cuentan las etiquetas completas.

Busquemos los primeros elementos en dos estructuras HTML simples.

• primer punto
• Segundo punto
• Tercer punto

solo hay dos maneras vivir la vida. Primero- como si los milagros no existieran. Segundo- como si sólo hubiera milagros por todas partes. Albert Einstein

Como resultado, se seleccionará el primer elemento de la lista y la etiqueta que determina el estilo de fuente en negrita.

primer punto

dos maneras

Sintaxis

Todas las pseudoclases en CSS se definen según un patrón determinado. Primero, se especifica el selector principal, luego la pseudoclase deseada, separada por dos puntos.

B:primer hijo (decoración de texto: subrayado;)

Esta regla subrayará el texto del primer elemento b dentro de cada contenedor.

• Todo el mundo quiere cambiar mundo mí mismo. León Tolstoi
• El que sabe como el lo hace quien no sabe como - él enseña a otros. Bernard Shaw

En la captura de pantalla, es obvio que solo se seleccionan los elementos correspondientes tanto al selector de etiquetas b como al selector de pseudoclase: primer hijo. El estilo se aplicó dentro de cada contenedor, en este caso dentro de todos los elementos de la lista.

Además de la etiqueta, puedes utilizar cualquier otro selector CSS como selector principal, por ejemplo:

Clase:primer hijo () :primer hijo () *:primer hijo ()

Errores comunes

La pseudoclase del primer hijo en CSS selecciona estrictamente la etiqueta que aparece primero en el contenedor principal. Incluso si un elemento coincide completamente con el selector, pero no es el primer hijo, no será seleccionado.

Por ejemplo, tomemos la lista anterior de citas y muevamos los autores al principio.

• León Tolstoi Todo el mundo quiere cambiar mundo pero nadie quiere cambiar mí mismo.
• Bernard Shaw El que sabe como el lo hace quien no sabe como - él enseña a otros.

Aunque el selector de elementos sigue siendo el mismo, el estilo CSS no se aplica porque el primer elemento del contenedor ahora es i.

Otro error es ignorar Este es el mismo elemento HTML que los demás. Si termina en el contenedor antes del bloque que estás buscando, el selector CSS de primer hijo no funcionará.

Contabilización del tipo de elemento

Para evitar este tipo de situaciones, puede utilizar la pseudoclase de primera clase. Funciona igual que el selector CSS de primer hijo, pero tiene en cuenta el tipo de elemento.

B: primero de tipo (decoración de texto: subrayado;)

Ahora solo se cuentan los elementos que coinciden con el selector b.

Seleccionando el último elemento

También hay una pseudoclase de último hijo, que funciona de manera similar al selector de primer hijo de CSS, pero comienza a contar elementos desde el final del contenedor.

Te doy la bienvenida a mi blog. Hoy me gustaría escribir sobre el tema de cómo seleccionar el primer elemento padre en CSS, porque esto permite utilizar menos clases de estilo.

Pseudoclases: primer hijo y primero de tipo, ¿cuál es la diferencia?

Para acceder al primer elemento desde el contenedor principal en CSS, se inventaron dos pseudoclases. Inmediatamente sugiero mirar todo con un ejemplo para que entiendas:

Digamos que tenemos el siguiente marcado. El objetivo es tomar el primer párrafo y diseñarlo por separado de los demás sin agregarle clases. Esto se puede hacer así:

#wrapper p:primer hijo( Color: rojo; )

El color del primer párrafo se volverá rojo, puedes comprobarlo.

#wrapper p: primero de tipo (color: rojo;)

Lo mismo sucederá. Entonces, ¿cuál es la diferencia? Y radica en el hecho de que la pseudoclase de primer tipo busca y encuentra el primer elemento del padre, teniendo en cuenta su tipo, y el primer hijo no busca nada, simplemente toma el primer elemento del padre que aparece y, si es un párrafo, le aplica estilos. De lo contrario, no se seleccionará ni aplicará nada.

Ahora piense: ¿funcionará el primero de tipo en este caso? Sí, porque tiene en cuenta el tipo de elemento y seleccionará el primer párrafo, y no el primero de todos los elementos. ¿Funcionará el primer hijo? Probar. No funcionará porque el párrafo no es el primer elemento del padre.

Personalmente, no entendí de inmediato la diferencia entre estas pseudoclases y estuve confundido por algún tiempo, pero ahora, espero, haberte explicado correctamente.

Otro detalle importante

Los elementos se cuentan exactamente desde el elemento principal, por lo que si lo especificaste así:

Li:primero de tipo(…)

Luego se seleccionarán los primeros elementos de la lista en la etiqueta del cuerpo (es decir, en toda la página). Por lo tanto, en cualquier lista el primer elemento tendrá un formato diferente.
Si lo escribes así:

#barra lateral li:primero de tipo(...)

Entonces solo se seleccionarán los primeros elementos de las listas en la barra lateral, es decir, la columna lateral de nuestro sitio web.

Usando los diversos selectores sobre los que he escrito, puedes acceder a casi cualquier elemento de una página web.

Por cierto, olvidé mencionar las pseudoclases opuestas: último hijo (y último de tipo, respectivamente). Le permiten seleccionar el último elemento del contenedor principal.

¿Dónde se puede utilizar en la práctica?

Estamos hablando de estas pseudoclases porque se utilizan activamente al codificar con CSS. En tu página, por ejemplo, tienes un bloque de publicaciones, comentarios o algo más similares. Y tuviste la idea de diseñar de alguna manera su primer elemento de una manera especial. O tal vez el último. Y, en general, cualquiera es posible.

Solo necesitas averiguar el nombre del bloque en el que está almacenado el elemento deseado. Digamos que estamos tratando con publicaciones populares. El contenedor principal tiene una clase popular. Luego escribimos así:

Li popular: primero de tipo (Padding-top: 20px;)

Eso es todo, el primer elemento de la lista recibió una sangría en la parte superior, pero puedes agregar lo que quieras al estilo.

Aquí hay otro ejemplo. Sólo tengo tres bloques grises idénticos en la etiqueta del cuerpo.
Escribámoslo así:

Div:primero de tipo( transformar: rotar(7deg); ) div:último de tipo( transformar: rotar(-7deg); )

El primer bloque estaba inclinado hacia la derecha y el último hacia la izquierda.

Y estos son sólo ejemplos de dónde y cómo se pueden utilizar nuestras pseudoclases.

En pocas palabras

Este es el artículo que se me ocurrió hoy. Es importante comprender la esencia de la selección de elementos y podrá utilizar estas técnicas en su trabajo sin ningún problema.

CSS (Cascading Style Sheets), u hojas de estilos en cascada, se utilizan para describir la apariencia de un documento escrito en un lenguaje de marcado. Los estilos CSS se utilizan normalmente para crear y diseñar elementos de páginas web e interfaces de usuario escritas en HTML y XHTML, pero también se pueden aplicar a cualquier tipo de documento XML, incluidos XML, SVG y XUL.

Las hojas de estilos en cascada describen reglas para formatear elementos usando propiedades y los valores permitidos para esas propiedades. Para cada elemento, puede utilizar un conjunto limitado de propiedades; otras propiedades no tendrán ningún efecto sobre él.

Una declaración de estilo consta de dos partes: el elemento de la página web: selector y comandos de formato - bloque de anuncios. El selector le dice al navegador qué elemento formatear, y el bloque de declaración (código entre llaves) enumera los comandos de formato: propiedades y sus valores.

Arroz. 1. Estructura de declaración de estilo CSS

Tipos de hojas de estilo en cascada y sus particularidades

1. Tipos de hojas de estilo

1.1. Hoja de estilo externa

Hoja de estilo externa es un archivo de texto con la extensión .css, que contiene un conjunto de estilos CSS para elementos. El archivo se crea en un editor de código, como una página HTML. El archivo sólo puede contener estilos, sin formato HTML. Una hoja de estilo externa está conectada a una página web mediante una etiqueta. , ubicado dentro de la sección . Estos estilos funcionan para todas las páginas del sitio.

Puede adjuntar varias hojas de estilo a cada página web agregando varias etiquetas en secuencia , indicando el propósito de esta hoja de estilo en el atributo de etiqueta de medios. rel="stylesheet" especifica el tipo de enlace (enlace a una hoja de estilo).

El estándar HTML5 no requiere el atributo type="text/css", por lo que se puede omitir. Si falta el atributo, el valor predeterminado es type="text/css" .

1.2. Estilos internos

Estilos internos incrustado en una sección Documento HTML y se definen dentro de la etiqueta.. Los estilos internos tienen prioridad sobre los externos, pero son inferiores a los estilos en línea (especificados mediante el atributo de estilo).

...

1.3. Estilos incorporados

cuando escribimos estilos en línea, escribimos el código CSS en el archivo HTML, directamente dentro de la etiqueta del elemento usando el atributo de estilo:

Presta atención a este texto.

Estos estilos sólo afectan al elemento para el que están configurados.

1.4. @regla de importación

@regla de importación Le permite cargar hojas de estilo externas. Para que la directiva @import funcione, debe aparecer en la hoja de estilo (externa o interna) antes que todas las demás reglas:

La regla @import también se utiliza para incluir fuentes web:

@importar URL(https://fonts.googleapis.com/css?family=Open+Sans&subset=latin,cyrillic);

2. Tipos de selectores

Selectores Representar la estructura de una página web. Ayudan a crear reglas para dar formato a los elementos de la página web. Los selectores pueden ser elementos, sus clases e identificadores, así como pseudoclases y pseudoelementos.

2.1. Selector universal

Coincide con cualquier elemento HTML. Por ejemplo, * (margen: 0;) restablecerá los márgenes de todos los elementos del sitio. El selector también se puede utilizar en combinación con una pseudoclase o pseudoelemento: *:after (estilos CSS), *:checked (estilos CSS).

2.2. Selector de elementos

Los selectores de elementos le permiten formatear todos los elementos de un tipo determinado en todas las páginas del sitio. Por ejemplo, h1 (familia de fuentes: Lobster, cursiva;) establecerá el estilo de formato general para todos los títulos h1.

2.3. selector de clase

Los selectores de clases le permiten establecer estilos para uno o más elementos con el mismo nombre de clase, ubicados en diferentes lugares de la página o en diferentes páginas del sitio. Por ejemplo, para crear un título con la clase de título, debe agregar el atributo de clase con el valor del título a la etiqueta de apertura.

y establece el estilo para la clase especificada. Los estilos creados usando una clase se pueden aplicar a otros elementos, no necesariamente de ese tipo.

Instrucciones para usar una computadora personal.

.headline (transformación de texto: mayúsculas; color: azul claro;)

2.4. selector de identificación

El selector de ID le permite formatear uno elemento específico. La identificación debe ser única y solo puede aparecer una vez en una página.

#barra lateral (ancho: 300 px; flotante: izquierda;)

2.5. Selector de descendientes

Los selectores descendientes aplican estilos a elementos dentro de un elemento contenedor. Por ejemplo, ul li (transformación de texto: mayúsculas;) seleccionará todos los elementos li que sean hijos de todos los elementos ul.

Si desea formatear los descendientes de un elemento en particular, debe darle a ese elemento una clase de estilo:

p.first a (color: verde;) - este estilo se aplicará a todos los enlaces descendientes del párrafo con la primera clase;

p .first a (color: verde;) - si agrega un espacio, se diseñarán los enlaces ubicados dentro de cualquier etiqueta .first class que sea descendiente del elemento

Primero a (color: verde;): este estilo se aplicará a cualquier enlace ubicado dentro de otro elemento, designado por la clase.first.

2.6. Selector de niños

Un elemento hijo es hijo directo de su elemento contenedor. Un elemento puede tener varios elementos secundarios, pero cada elemento solo puede tener un elemento principal. El selector secundario le permite aplicar estilos solo si el elemento secundario viene inmediatamente después del elemento principal y no hay otros elementos entre ellos, es decir, el elemento secundario no está anidado dentro de nada más.
Por ejemplo, p > strong seleccionará todos los elementos fuertes que sean hijos del elemento p.

2.7. Selector de hermanas

La hermandad ocurre entre elementos que comparten un padre común. Los selectores hermanos le permiten seleccionar elementos de un grupo de elementos del mismo nivel.

h1 + p: seleccionará todos los primeros párrafos inmediatamente después de cualquier etiqueta

sin afectar los restantes párrafos;

h1 ~ p: seleccionará todos los párrafos que sean hermanos de cualquier título h1 e inmediatamente después de él.

2.8. selector de atributos

Los selectores de atributos seleccionan elementos según el nombre del atributo o el valor del atributo:

[atributo] - todos los elementos que contienen el atributo especificado - todos los elementos para los que se especifica el atributo alt;

selector[atributo] - elementos de este tipo que contienen el atributo especificado, img - sólo imágenes para las que se especifica el atributo alt;

selector[atributo="valor"] - elementos de este tipo que contienen el atributo especificado con un valor específico, img - todas las imágenes cuyo título contiene la palabra flor;

selector[atributo~="valor"] - elementos que contienen parcialmente un valor dado, por ejemplo, si se especifican varias clases para un elemento separado por un espacio, p - párrafos cuyo nombre de clase contiene característica;

selector[atributo|="valor"] - elementos cuya lista de valores de atributos comienza con la palabra especificada, p - párrafos cuyo nombre de clase es característica o comienza con característica;

selector[atributo^="valor"] - elementos cuyo valor de atributo comienza con el valor especificado, a - todos los enlaces que comienzan con http://;

selector[atributo$="valor"] - elementos cuyo valor de atributo termina con el valor especificado, img - todas las imágenes en formato png;

selector[atributo*="valor"] - elementos cuyo valor de atributo contiene la palabra especificada en cualquier lugar, a - todos los enlaces cuyo nombre contiene libro.

2.9. Selector de pseudoclase

Las pseudoclases son clases que en realidad no están adjuntas a etiquetas HTML. Le permiten aplicar reglas CSS a elementos cuando ocurre un evento u obedece a una regla específica. Las pseudoclases caracterizan elementos con las siguientes propiedades:

:hover: cualquier elemento sobre el cual se coloca el cursor del mouse;

:focus: un elemento interactivo al que se navegó mediante el teclado o se activó mediante el mouse;

:active - elemento que fue activado por el usuario;

:válido: campos de formulario cuyo contenido se ha comprobado en el navegador para comprobar que cumple con el tipo de datos especificado;

:invalid — campos de formulario cuyo contenido no coincide con el tipo de datos especificado;

:habilitado: todos los campos del formulario activos;

:disabled — campos de formulario bloqueados, es decir, en estado inactivo;

:in-range: campos de formulario cuyos valores están en el rango especificado;

:fuera de rango: campos de formulario cuyos valores no están dentro del rango especificado;

:lang() - elementos con texto en el idioma especificado;

:not(selector) - elementos que no contienen el selector especificado - clase, identificador, nombre o tipo de campo de formulario - :not() ;

:objetivo es un elemento con el símbolo # al que se hace referencia en el documento;

:marcado: elementos de formulario seleccionados (seleccionados por el usuario).

2.10. Selector de pseudoclase estructural

Las pseudoclases estructurales seleccionan elementos secundarios según el parámetro especificado entre paréntesis:

:nth-child(impar) - elementos secundarios impares;

:nth-child(even) - elementos hijos pares;

:nth-child(3n) - uno de cada tres elementos entre los niños;

:nth-child(3n+2) - selecciona cada tercer elemento, comenzando con el segundo hijo (+2);

:nth-child(n+2) - selecciona todos los elementos a partir del segundo;

:nth-child(3) - selecciona el tercer elemento secundario;

:nth-last-child() - en la lista de elementos secundarios, selecciona el elemento con la ubicación especificada, similar a :nth-child() , pero comenzando desde el último, en la dirección opuesta;

:first-child: le permite aplicar estilo solo al primer elemento secundario de la etiqueta;

:last-child: le permite formatear el último elemento secundario de la etiqueta;

:only-child: selecciona un elemento que es el único elemento secundario;

:empty: selecciona elementos que no tienen hijos;

:root: selecciona el elemento que es la raíz del documento: el elemento html.

2.11. Selector de pseudoclase de tipo estructural

Indica un tipo específico de etiqueta secundaria:

:nth-of-type() - selecciona elementos similares a :nth-child() , pero solo tiene en cuenta el tipo de elemento;

:primero de tipo: selecciona el primer hijo de un tipo determinado;

:last-of-type: selecciona el último elemento de este tipo;

:nth-last-of-type() - selecciona un elemento del tipo dado en una lista de elementos según la ubicación especificada, comenzando desde el final;

:only-of-type: selecciona el único elemento del tipo especificado entre los elementos secundarios del elemento principal.

2.12. Selector de pseudoelementos

Los pseudoelementos se utilizan para agregar contenido, que se genera utilizando la propiedad de contenido:

:primera letra: selecciona la primera letra de cada párrafo, se aplica solo a elementos de bloque;

:primera línea: selecciona la primera línea del texto del elemento, se aplica solo a elementos de bloque;

:antes: inserta el contenido generado antes del elemento;

:after: agrega contenido generado después del elemento.

3. Combinación de selectores

Para seleccionar elementos para formatear con mayor precisión, puede utilizar combinaciones de selectores:

img:nth-of-type(even) - seleccionará todas las imágenes pares cuyo texto alternativo contenga la palabra css.

4. Selectores de agrupación

Se puede aplicar el mismo estilo a varios elementos al mismo tiempo. Para hacer esto, debe enumerar los selectores requeridos en el lado izquierdo de la declaración, separados por comas:

H1, h2, p, span ( color: tomate; fondo: blanco; )

5. Herencia y cascada

Herencia y cascada son dos conceptos fundamentales en CSS que están estrechamente relacionados. La herencia es donde los elementos heredan propiedades de su padre (el elemento que las contiene). La cascada se manifiesta en cómo se aplican diferentes tipos de hojas de estilo a un documento y en cómo las reglas en conflicto se anulan entre sí.

5.1. Herencia

Herencia Es el mecanismo por el cual ciertas propiedades se transmiten de un antepasado a sus descendientes. La especificación CSS permite la herencia de propiedades relacionadas con el contenido de texto de la página, como color, fuente, espacio entre letras, altura de línea, estilo de lista, alineación de texto, sangría de texto, transformación de texto, visibilidad, blanco. -espacio y espaciado entre palabras. En muchos casos, esto es conveniente porque no es necesario configurar el tamaño y la familia de fuentes para cada elemento de la página web.

Las propiedades relacionadas con el formato de bloque no se heredan. Estos son fondo, borde, visualización, flotante y claro, alto y ancho, margen, mínimo-máximo-alto y ancho, contorno, desbordamiento, relleno, posición, decoración de texto, alineación vertical e índice z.

herencia forzada

Puede utilizar la palabra clave heredar para forzar que un elemento herede cualquier valor de propiedad de su elemento principal. Esto funciona incluso para propiedades que no se heredan de forma predeterminada.

Cómo se configuran y funcionan los estilos CSS

1) Los estilos se pueden heredar del elemento principal (propiedades heredadas o utilizando el valor heredado);

2) Los estilos ubicados en la hoja de estilos a continuación anulan los estilos ubicados en la tabla anterior;

3) Se pueden aplicar estilos de diferentes fuentes a un elemento. Puede comprobar qué estilos se aplican en el modo de desarrollador del navegador. Para hacer esto, haga clic derecho en el elemento y seleccione "Ver código" (o algo similar). La columna de la derecha enumerará todas las propiedades establecidas en este elemento o heredadas de un elemento principal, junto con los archivos de estilo en los que se especifican y la línea ordinal de código.

Arroz. 2. Modo desarrollador en el navegador Google Chrome

4) Al definir un estilo, puede utilizar cualquier combinación de selectores: un selector de elemento, una pseudoclase de elemento, una clase o un identificador de elemento.

div (borde: 1px sólido #eee;) #wrap (ancho: 500px;).box (flotante: izquierda;).clear (claro: ambos;)

5.2. Cascada

en cascada es un mecanismo que controla el resultado final en una situación en la que se aplican diferentes reglas CSS al mismo elemento. Hay tres criterios que determinan el orden en que se aplican las propiedades: la regla importante, la especificidad y el orden en que se incluyen las hojas de estilo.

¡Regla!importante

El peso de una regla se puede especificar usando la palabra clave!important, que se agrega inmediatamente después del valor de la propiedad, por ejemplo, span (font-weight: negrita!important;) . La regla debe colocarse al final de la declaración antes del paréntesis de cierre, sin espacio. Tal anuncio tendrá prioridad sobre todas las demás reglas. Esta regla le permite cancelar un valor de propiedad y establecer uno nuevo para un elemento de un grupo de elementos en el caso de que no haya acceso directo al archivo de estilo.

Especificidad

Para cada regla, el navegador calcula especificidad del selector, y si un elemento tiene declaraciones de propiedad contradictorias, se tiene en cuenta la regla que tenga mayor especificidad. El valor de especificidad tiene cuatro partes: 0, 0, 0, 0. La especificidad del selector se define de la siguiente manera:

para id, se agrega 0, 1, 0, 0;
para la clase 0, se añade 0, 1, 0;
para cada elemento y pseudoelemento se suma 0, 0, 0, 1;
para un estilo en línea agregado directamente a un elemento: 1, 0, 0, 0;
Un selector universal no tiene especificidad.

H1 (color: azul claro;) /*especificidad 0, 0, 0, 1*/ em (color: plata;) /*especificidad 0, 0, 0, 1*/ h1 em (color: dorado;) /*especificidad: 0, 0, 0, 1 + 0, 0, 0, 1 = 0, 0, 0, 2*/ div#main p.about (color: azul;) /*especificidad: 0, 0, 0, 1 + 0 , 1, 0, 0 + 0, 0, 0, 1 + 0, 0, 1, 0 = 0, 1, 1, 2*/ .sidebar (color: gris;) /*especificidad 0, 0, 1, 0 */ #sidebar (color: naranja;) /*especificidad 0, 1, 0, 0*/ li#sidebar (color: aqua;) /*especificidad: 0, 0, 0, 1 + 0, 1, 0, 0 = 0, 1, 0, 1*/

Como resultado, se aplicarán al elemento aquellas reglas que sean más específicas. Por ejemplo, si un elemento tiene dos especificidades con valores 0, 0, 0, 2 y 0, 1, 0, 1, entonces ganará la segunda regla.

Orden de tablas conectadas

Puede crear varias hojas de estilo externas y conectarlas a una página web. Si se encuentran diferentes valores de propiedad para un elemento en diferentes tablas, como resultado, se aplicará al elemento la regla que se encuentra en la hoja de estilo que se enumera a continuación.

Has llegado a la tercera parte de este capítulo. Aquí aprenderá a utilizar selectores de elementos secundarios en CSS, así como algunas pseudoclases adicionales para una selección más precisa.

Selectores secundarios CSS

En el artículo anterior hablamos de las relaciones entre los elementos de un documento HTML, incluidos los elementos secundarios. Veamos un ejemplo de cómo se pueden utilizar estas relaciones en CSS.

Imagina que solo necesitas darle estilo a esas etiquetas.

que son subsidiarias de sin afectar a los demás

(Por ejemplo,

Filiales de