¿Qué elegirá el seleccionador? Agrupamiento. Selectores de agrupación en CSS

Al crear un estilo para un sitio, cuando se utilizan muchos selectores simultáneamente, pueden aparecer reglas de estilo duplicadas. Para evitar repetir los mismos elementos dos veces, se pueden agrupar para facilitar la presentación y reducir el código. El ejemplo 17.1 muestra una entrada típica, en la que cada selector tiene su propio conjunto de propiedades de estilo.

Ejemplo 17.1. Estilo para cada selector

H1 (familia de fuente: Arial, Helvetica, sans-serif; tamaño de fuente: 160%; color: #003; ) H2 (familia de fuente: Arial, Helvetica, sans-serif; tamaño de fuente: 135%; color: #333; ) H3 (familia de fuentes: Arial, Helvetica, sans-serif; tamaño de fuente: 120%; color: #900; ) P (familia de fuentes: Times, serif; )

En este ejemplo, puede ver que el estilo de las etiquetas de encabezado contiene el mismo valor de familia de fuentes. La agrupación le permite establecer una propiedad para varios selectores a la vez, como se muestra en el ejemplo 17.2.

Ejemplo 17.2. Selectores agrupados

H1, H2, H3 (familia de fuentes: Arial, Helvetica, sans-serif; ) H1 (tamaño de fuente: 160%; color: #003; ) H2 (tamaño de fuente: 135%; color: #333; ) H3 (tamaño de fuente: 120%; color: #900;)

En este ejemplo, la misma familia de fuentes para todos los selectores se aplica a varias etiquetas a la vez y las propiedades individuales ya se agregan a cada selector por separado.

Los selectores se agrupan como una lista de etiquetas separadas por comas. Un grupo puede incluir no sólo selectores de etiquetas, sino también identificadores y clases. La sintaxis general es la siguiente.

Selector 1, Selector 2, ... Selector N (Descripción de reglas de estilo)

Cuando se escriben de esta manera, las reglas de estilo se aplican a todos los selectores enumerados en el mismo grupo.

Preguntas para comprobar

1. ¿Qué color de fondo tendrá el elemento con la clase de botón cuando el estilo anterior esté habilitado?

Bgzapas, .button, h1 (tamaño de fuente: 1.2em; relleno: 10px; color de fondo: #fcfaed; ) .bgzapas (color de fondo: #e7f2d7; ) .button, h2 (ancho: 95px; tamaño de fuente: 11px; color: #f3fced; color de fondo: #5ca22e; ) .bgzapas, .button (color de fondo: #d9d7f2; )

#fcfaed
#e7f2d7
#f3fced
#5ca22e
#d9d7f2

Un selector es parte de una regla CSS que le dice al navegador a qué elemento (o elementos) de una página web se le aplicará estilo.

El término selector puede referirse a un selector simple, un selector compuesto, un selector complejo o una lista de selectores.

A selectores simples relatar:

selector de tipo
selector universal
selectores de atributos
selector de identificador
selector de clase
pseudoclases

Selector CSS	Ejemplo	Descripción	CSS
.clase	.mi clase	Selecciona todos los elementos con clase myClass (class="myClass").	1
#identificación	#principal	Selecciona el elemento con id principal (id="main").	1
	*	Seleccionando todos los elementos.	2
elemento	durar	Seleccionando todos los elementos .	1
elemento, elemento	div, intervalo	Seleccionando todos los elementos y todos los elementos .	1
[atributo]		Selecciona todos los elementos con un atributo de título.	2
[atributo="valor"]		Selecciona todos los elementos con un atributo de título cuyo valor coincida exactamente con el valor especificado en el selector (title="cost"). !}	2
[atributo~="valor"]		Selecciona todos los elementos con un atributo de título cuyo valor (en cualquier lugar) contenga la subcadena (como una sola palabra) "uno" (título="uno y dos"). !}	2
[atributo\|="valor"]		Selecciona todos los elementos con un atributo lang cuyo valor comienza con "ru".	2
[atributo^="valor"]	a	Seleccionar cada elemento con un atributo href cuyo valor comienza con "https".	3
[atributo$="valor"]		Selecciona todos los elementos con un atributo src cuyo valor termina en ".png" (src="some_img.png").	3
[atributo*="valor"]		Selecciona todos los elementos con un atributo de título cuyo valor (en cualquier lugar) contenga la subcadena (como una sola palabra o parte de ella) "uno" (título="uno y dos"). !}	3

Selector compuesto es una secuencia de selectores simples que no están separados por combinadores, es decir, un selector es seguido inmediatamente por el siguiente. Selecciona un elemento que coincide con todos los selectores simples que contiene. El selector de tipo o selector universal incluido en un selector compuesto debe aparecer primero en esta secuencia. En un selector compuesto sólo se permite un selector de tipo o selector universal.

Span.className p.className1.className2#someId:hover

Selector complejo es una secuencia de selectores que están separados por combinadores.

Lista de selectores son selectores separados por comas.

Combinadores

Para combinar selectores CSS simples, se utilizan combinadores para indicar la relación entre selectores simples. Hay varios combinadores diferentes en CSS2 y uno adicional en CSS3, cuando los usas cambian la naturaleza del selector en sí.

Pseudoclases

Una pseudoclase es un selector simple que se usa para seleccionar algo que no se puede seleccionar usando otros selectores o que se puede seleccionar de una manera bastante difícil.

Pseudoclase	Ejemplo	Descripción	CSS
:enlace	un enlace	Selecciona todos los enlaces no visitados.	1
:visitado	a:visitado	Seleccione todos los enlaces visitados.	1
:activo	a: activo	Seleccionar un enlace activo.	1
:flotar	a: flotar	Seleccionar un enlace al pasar el cursor del mouse.	1
:enfocar	entrada: foco	Selección de elementos , que está en foco.	2
:primer hijo	p:primer hijo	Seleccionar cada elemento Cuál es el primer hijo de su padre.	2
:idioma(idioma)	p: idioma (ru)	Seleccionar cada elemento Con un atributo lang cuyo valor comienza con "ru".	2
:primero de tipo	p: primero de tipo	Seleccionar cada elemento ¿Cuál es el primero de los elementos?	3
:último tipo	p:último tipo	Seleccionar cada elemento ¿Cuál es el último de los elementos? Su elemento padre.	3
:solo de tipo	p: único de tipo	Seleccionar cada elemento ¿Cuál es el único elemento Su elemento padre.	3
:hijo único	p: hijo único	Seleccionar cada elemento Cuál es el único elemento hijo de su elemento padre.	3
:n-ésimo hijo(n)	p: n-ésimo hijo (2)	Seleccionar cada elemento Su elemento padre.	3
:n-ésimo-último-hijo(n)	p: enésimo-último-hijo(2)	Seleccionar cada elemento Que es el segundo hijo de su elemento padre, contando desde el último hijo.	3
: enésimo de tipo (n)	p: enésimo tipo (2)	Seleccionar cada elemento cual es el segundo hijo Su elemento padre.	3
:n-ésimo-último-de-tipo(n)	p:nésimo-último-de-tipo(2)	Seleccionar cada elemento cual es el segundo hijo Su elemento padre, contando desde el último elemento hijo.	3
	3
:no(selector)	:no(p)	Seleccionar todos los elementos excepto el elemento .	3

Pseudoelementos

Un pseudoelemento es un elemento virtual que no existe explícitamente en el árbol de elementos del documento. Los pseudoelementos se utilizan para seleccionar partes de un elemento que no se pueden seleccionar utilizando otros selectores, y también para diseñar partes de un elemento en lugar de todo el elemento.

¿Qué es un selector en CSS? es una descripción de ese elemento o grupo de elementos que le dice al navegador qué elemento seleccionar para aplicarle un estilo. Veamos los selectores CSS básicos.

1) .X

.título del tema (color de fondo: amarillo;)

Selector CSS por clase X. La diferencia entre id y clase es que varios elementos de una página pueden tener la misma clase, pero la id siempre es única. Las clases deben usarse para aplicar el mismo estilo a múltiples elementos.

Cromo
Firefox
Safari
Ópera

2)#X

#content (ancho: 960px; margen: 0 automático;)

selector de identificación CSS. El signo hash antes del selector CSS X selecciona un elemento cuya identificación = X. Al asignar estilos por identificación, siempre debe recordar que debe ser único; solo una de esas identificaciones debe estar en la página. Por tanto, es mejor utilizar selectores por clases, combinaciones de clases o nombres de etiquetas. Sin embargo, los selectores de identificación son excelentes para pruebas automatizadas porque... Le permiten interactuar inmediatamente exactamente con el elemento deseado y tener la confianza de que solo hay uno de este tipo en la página.

Cromo
Firefox
Safari
Ópera

3) *

* ( margen: 0; relleno: 0; )

Selector CSS para todos los elementos.. El símbolo de estrella selecciona todos los elementos que están en la página. Muchos desarrolladores lo utilizan para eliminar (poner a cero) los valores de margen y relleno de todos los elementos de la página. Sin embargo, en la práctica es mejor no hacer esto porque este selector de CSS carga bastante el navegador al buscar en todos los elementos de la página.

El símbolo * también se puede utilizar para seleccionar todos los elementos secundarios:

#encabezado * (borde: 5px gris sólido;)

Este ejemplo selecciona todos los hijos (descendientes) del elemento con #header . Pero siempre vale la pena recordar que este selector es bastante pesado para el navegador.

Cromo
Firefox
Safari
Ópera

4)X

a (color: verde;) ol (margen izquierdo: 15px;)

selector de tipo CSS. ¿Cómo seleccionar todos los elementos del mismo tipo si no tienen id ni clases? Vale la pena utilizar un selector de tipo de elemento CSS. Por ejemplo, para seleccionar todas las listas ordenadas en una página, use ol(...) como se muestra arriba.

Cromo
Firefox
Safari
Ópera

5) X Y

li a (peso de fuente: negrita; decoración de texto: ninguna;)

Selector descendiente CSS o Selector de elementos secundarios CSS se utiliza con mayor frecuencia. Se utiliza si es necesario seleccionar elementos de un determinado tipo entre muchos elementos secundarios. Por ejemplo, debe seleccionar todos los enlaces que están en el elemento li. En este caso, utilice este selector. Cuando utilice cadenas de selectores de este tipo, pregúntese siempre si se podría utilizar una secuencia de selectores aún más corta para resaltar un elemento determinado.

Cromo
Firefox
Safari
Ópera

6)X+Y

div + p (familia de fuentes: "Helvetica Neue", Arial, sans-serif; tamaño de fuente: 18px;)

Selector de elementos adyacentes elige solo un elemento de tipo Y que viene inmediatamente después del elemento X. En este caso, cada párrafo inmediatamente después de cada elemento div recibirá un tipo y tamaño de fuente especiales.

IE7+
Firefox
Cromo
Safari
Cromo

7) X > Y

#content > ul (borde: 1px verde sólido;)

Selector descendiente CSS. La diferencia entre los selectores X Y y X > Y es que el selector CSS en cuestión solo seleccionará hijos inmediatos de elementos (solo seleccionará descendientes directos). P.ej:

Elemento de lista
- Descendiente del primer elemento de la lista.
Elemento de lista
Elemento de lista

El selector CSS #content > ul solo seleccionará un ul que sea un hijo directo del div con id="container" . No seleccionará un ul que sea hijo del primer li. Este es un selector de CSS bastante rápido.

Cromo
Firefox
Safari
Ópera

8) X ~ Y

ol ~ p (margen izquierdo: 10px;)

Selector de elementos hermanos (subling) menos estricto que X + Y. Seleccionará no solo el primero, sino también todos los demás elementos p siguientes a ol.

Cromo
Firefox
Safari
Ópera

a:enlace ( color: verde; ) a:visitado ( color: gris; )

Pseudoclase: enlace Se utiliza para seleccionar todos los enlaces en los que aún no se ha hecho clic. Si necesita aplicar un estilo determinado a enlaces ya visitados, utilice pseudoclase: visitada.

Cromo
Firefox
Safari
Ópera

10)X

a(color:rojo;)

selector de atributos CSS. Este ejemplo selecciona sólo aquellos enlaces que tienen un atributo de título.

Cromo
Firefox
Safari
Ópera

11)X

un (color: amarillo;)

Cromo
Firefox
Safari
Ópera

12)X

un (color: #dfc11f;)

El asterisco significa que el valor que busca debe estar en algún lugar del atributo (cualquier parte del atributo href). De esta forma también se seleccionarán los enlaces de https://www..stijit.. El color dorado se aplicará a todos los enlaces seleccionados.

Cromo
Firefox
Safari
Ópera

13)X

a (fondo: url(ruta/a/externo/icon.png) sin repetición; relleno-izquierda: 15px;)

Algunos sitios tienen pequeños íconos de flechas junto a enlaces a otros sitios para indicar que son enlaces externos. El quilate “^” es un símbolo para indicar el comienzo de una línea. Por lo tanto, para seleccionar todas las etiquetas cuyo href comience con http, debe usar un selector CSS con quilates, como se muestra en el ejemplo anterior.

Cromo
Firefox
Safari
Ópera

14)X

a(color:verde;)

Esto utiliza una expresión regular y el símbolo $ para indicar el final de la línea. En este ejemplo, buscamos todos los enlaces que hacen referencia a imágenes con una extensión .jpg.

Cromo
Firefox
Safari
Ópera

15)X

a(color:verde;)

Aquí aplicamos Selector de atributos personalizados CSS. Agregamos nuestro propio atributo de tipo de archivo de datos a cada enlace:

enlace

Ahora, usando el selector CSS anterior, puede seleccionar todos los enlaces que conducen a imágenes con cualquier extensión.

Cromo
Firefox
Safari
Ópera

16)X

La tilde (~) le permite resaltar un atributo específico de una lista de atributos separados por un espacio. Puede escribir nuestro propio atributo data-info, en el que puede especificar varias palabras clave separadas por un espacio. De esta forma podrás indicar que el enlace es externo y lleva a una imagen.

enlace

Usando esta técnica, podemos seleccionar elementos con las combinaciones de atributos que necesitemos:

/* Seleccione un elemento cuyo atributo de información de datos contenga el valor externo */ a ( color: verde; ) /* Seleccione un elemento cuyo atributo de información de datos contenga el valor imagen */ a ( borde: 2px negro discontinuo; )

Cromo
Firefox
Safari
Ópera

17) X: marcado

entrada: marcado (borde: 3px inicio negro;)

Esta pseudoclase solo resalta elementos como una casilla de verificación o un botón de opción, y solo cuando ya están en el estado marcado.

Cromo
Firefox
Safari
Ópera

18) X:después

Las pseudoclases :before y :after son muy útiles: crean contenido antes y después del elemento seleccionado.

Clearfix:después ( contenido: ""; mostrar: bloque; borrar: ambos; visibilidad: oculto; tamaño de fuente: 0; altura: 0; ) .clearfix ( *display: inline-block; _height: 1%; )

Aquí, usando la pseudoclase:después, se crea una línea vacía después del bloque con class.clearfix y luego se borra. Este enfoque se utiliza si no es posible aplicar la propiedad overflow: oculta.

Cromo
Firefox
Safari
Ópera

19) X: flotar

div:hover (color de fondo: rgba(11,77,130,0.5); )

Aplica un estilo específico a un elemento cuando el cursor del mouse pasa sobre él. Las versiones anteriores de Internet Explorer solo se aplican: pase el cursor sobre los enlaces.

A: pasar el cursor (borde inferior: 1 px con puntos azules;)

IE6+ (Solo se aplica a enlaces en IE6)
Cromo
Firefox
Safari
Ópera

20) X:no(selector)

div:not(#content) (color: gris;)

Pseudoclase no (negaciones) Esto es útil cuando, por ejemplo, necesita seleccionar todos los divs excepto el que tiene id="content" .

Usando el mismo principio, puedes seleccionar todos los elementos excepto p:

*:no(p) ( color: azul; )

Cromo
Firefox
Safari
Ópera

21) X::pseudoElemento

p::primera línea (peso de fuente: negrita; tamaño de fuente: 24px;)

Los pseudoelementos se pueden utilizar para aplicar estilos a partes de elementos (por ejemplo, la primera línea de un párrafo o la primera letra de una palabra). Se aplica sólo a elementos de bloque.

Seleccionando la primera letra de un párrafo:

P::primera letra (familia de fuentes: cursiva; tamaño de fuente: 30 px; peso de fuente: negrita; relleno derecho: 1 px;)

Seleccionar la primera línea de un párrafo:

P: primera línea (tamaño de fuente: 28px; peso de fuente: negrita;)

Cromo
Firefox
Safari
Ópera

22) X:primer hijo

ul li:primer hijo (borde superior: ninguno;)

Primer hijo de pseudoclase selecciona solo el primer hijo del elemento padre. A menudo se utiliza para eliminar un borde del primer elemento de una lista. Esta pseudoclase ha existido desde CSS 1.

Cromo
Firefox
Safari
Ópera 3.5+
Androide

23) X: último hijo

ul > li: último hijo (borde inferior: ninguno;)

Último hijo de pseudoclase selecciona el último hijo del elemento padre. Sólo apareció desde CSS 3.

IE9+ (IE8 admite el primer hijo, pero no el último hijo. Microsoft (c))
Cromo
Firefox
Safari
Ópera 9.6+
Androide

24) X: hijo único

div p: hijo único (color: verde;)

Hijo único de pseudoclase permite seleccionar aquellos elementos que son hijos únicos de sus padres.

Cromo
Firefox
Safari 3.0+
Ópera 9.6+
Androide

25) X: enésimo hijo(n)

li:nth-child(3) (color: negro;)

Selecciona el elemento hijo por el número especificado en el parámetro. selector de enésimo hijo toma un número entero como parámetro, pero cuenta desde 1, es decir si necesita seleccionar el segundo elemento de la lista, use li:nth-child(2) . Todas las pseudoclases que usan nth-child aparecieron solo a partir de CSS 3.

Cromo
Firefox 3.6+
Safari 3.1+
Ópera 9.6+
Androide 2.1+
iOS 2.0+

26) X: enésimo último hijo(n)

li:nésimo-último-hijo(2) (color: rojo;)

¿Tiene una lista grande de elementos en ul y necesita seleccionar el tercer elemento desde el final? En lugar de escribir li:nth-child(109) puedes usar selector del último hijo n-ésimo-último-hijo. Este método es igual que el anterior, pero contando desde el final.

Cromo
Firefox 3.6+
Safari 3.1+
Ópera 9.6+
Androide 2.1+
iOS 2.0+

27) X: enésimo tipo (n)

ul:nth-of-type(3) (borde: 1px con puntos negros;)

Si hay cuatro listas desordenadas en una página y solo necesita diseñar la tercera, que no tiene una identificación única, debe usar nth-of-type.

Cromo
Firefox 3.6+
Safari 3.1+
Ópera 9.6+
Androide 2.1+
iOS 2.0+

28) X: enésimo último de tipo (n)

ul:nth-last-of-type(3) (borde: cresta azul de 2px;)

Pseudoclase enésima última de tipo (n) está destinado a seleccionar el enésimo elemento de un determinado tipo desde el final.

Cromo
Firefox 3.6+
Safari 3.1+
Ópera 9.6+
Androide 2.1+
iOS 2.0+

29) X: único de tipo

li:solo tipo (peso de fuente: negrita;)

Pseudoclase solo de tipo selecciona elementos que no tienen vecinos dentro del elemento principal. Por ejemplo, puede seleccionar todos los ul que contengan solo lis solitarios.

Cromo
Firefox 3.5+
Safari 3.1+
Ópera 9.6+
Androide 2.1+
iOS 2.0+

30) X: primero de tipo

ul:primero de tipo > li:nth-child(3) (estilo de fuente: cursiva; )

Pseudoclase de primera clase selecciona el primer elemento del tipo dado.

Cromo
Firefox 3.5+
Safari 3.1+
Ópera 9.5+
Androide 2.1+
iOS 2.0+

En la última lección analizamos formas de incluir CSS. Pasemos ahora al lenguaje en sí.

Como cualquier otro idioma, CSS tiene su propia sintaxis, pero extremadamente simple. Consta de solo dos componentes:

1. Selector(seleccionando el objeto con el que trabajaremos. Por ejemplo, título, div, tabla, etc.)
2. Bloque de estilo- descripción de una o más propiedades de un objeto - color, tamaño, etc. Consiste en llaves ()

Vemos como el título es un selector, en el bloque de estilo se le asigna la propiedad color del texto ( color) - azul.
bloque de estilo comprende propiedades Y sus significados, que se separan cuando se enumeran punto y coma (;), como en el ejemplo siguiente.

Ahora estamos agregando uno más. propiedad - formato de texto (fuente). en el damos significado tamano del texto - 20 píxeles.

Ejemplo de CSS

Cree una carpeta en cualquier lugar, por ejemplo, lección 2. Crea un archivo en él. estilo.css. Copie todo el código a continuación en él. En el código CSS configuramos propiedades para la etiqueta. y encabezados

Y
.
Código CSS(archivo estilo.css)
Cuerpo(
fondo: gris;
color blanco;
}
h1(color:#0085cc;)
h2(color:blanco;)
Tenga en cuenta que no habrá diferencia si el bloque de estilo está escrito en una línea (h1,h2) o en una columna (cuerpo). Ambas opciones funcionarán. Elige lo que más te convenga.
Ahora creemos un archivo HTML. No importa cuál sea el nombre, lo principal es que la ruta al archivo con el código CSS esté especificada correctamente. Indicado del mismo modo que en los enlaces, rutas a imágenes. El siguiente ejemplo muestra la ruta (style.css) al mismo directorio que el archivo html. Es decir, ambos archivos deben estar en la misma carpeta.
Código HTML

Ejemplo de CSS

Rumbo h1

Rumbo h2

El resultado del código se puede ver en el siguiente enlace.

Selectores CSS

En los ejemplos anteriores, los selectores fueron elementos de pagina: cuerpo, h1, h2. Sin embargo, hay situaciones en las que es necesario trabajar con un elemento específico y no con todos. Por ejemplo, todos los títulos eran azules y uno al final era negro. Existen diferentes tipos de selectores para esto. Echemos un vistazo más de cerca.

Identificadores

Identificación del artículo es un selector que se asigna a un elemento y lo hace único. Establecer usando identificación del parámetro.

A este párrafo se le asigna una identificación. Tendrá propiedades únicas.

Las opciones de texto permanecerán en sus valores predeterminados.

Veamos un ejemplo

Código HTML y CSS

Ejemplo de CSS

Texto que será azul porque hay una identificación.

El color del texto permanecerá en su valor predeterminado.

Primero, en los estilos de todos los párrafos, la propiedad de color se establece en negro y el texto del párrafo con ID "azul" será azul. El selector en este caso consta de un elemento (p - párrafo), un separador (# - designación del identificador) y el nombre del identificador (azul).

Es importante señalar que, en teoría, el identificador se le da solo a un elemento al que queremos otorgar propiedades únicas. Sí, en algunos navegadores puede funcionar dar el mismo ID a dos elementos. Sin embargo, esto no sucederá en todas partes.

Si desea establecer estilos para varios elementos, debe utilizar clases.

Clases

Clase es un selector que le permite aplicar estilos a uno o más elementos. Por ejemplo, la identificación solo se aplica a un elemento único. El valor es el nombre del elemento.

Veamos un ejemplo:

Código HTML y CSS

Ejemplo de CSS

El color del texto es negro.

Texto azul.

El texto está en negrita y azul.

El color del texto es negro.

El resultado es un párrafo con identificador ( identificación) azul tendrá texto azul, elementos con clase el azul se resaltará en negrita y en azul. Y todos los demás elementos pag tendrá una fuente negra.

Como puede ver, la clase se puede aplicar varias veces. En consecuencia, todos los elementos tendrán las propiedades descritas para esta clase.

Selectores unificados

Selectores unificados (.) Es un selector que se puede asignar a diferentes tipos de elementos, por ejemplo, encabezados, párrafos y bloques (divs). La opción más común. Anteriormente, usamos la construcción en el código CSS. p#azul Y p.azul, es decir, primero indicaron el tipo de elemento (p - párrafo), y luego el identificador o clase en sí. Para que pueda especificar la construcción de manera más sencilla, comience inmediatamente con .azul. Un selector similar será aplicable no sólo a los párrafos, sino también a otros elementos.

Código HTML y CSS

Ejemplo de CSS

Encabezado con identificador.

El color del texto es negro.

El texto está en negrita y azul.

El texto del bloque también está en negrita y en azul.

El texto del elemento en línea también está en negrita y en azul.

El resultado es un selector unificado, en este caso clase .azul, lo aplicamos tanto a un párrafo (p), como a un bloque (div) y a un elemento de línea (span). El resultado es el mismo en todas partes: el texto está en negrita y en azul.

Selectores de contexto

Selector de contexto es un selector que selecciona un elemento en un grupo de otros elementos. La ortografía está marcada con un espacio. Para hacerlo más fácil, vayamos directamente a un ejemplo. Digamos que queremos que el texto en negrita contenido en los párrafos se resalte en algún otro color.

Código HTML y CSS

Ejemplo de CSS

El color del texto es negro. Pero las etiquetas de fuentes en negrita no se mencionan aquí.

Texto normal en negrita, que no está contenido en el párrafo. Por tanto, su color no cambia.

Y atención!!! Párrafo con una frase fuente azul negrita

En consecuencia, solo el texto en negrita (fuerte) que estará en el párrafo (p) se resaltará en azul.

Selectores de agrupación

Selectores de agrupación- esta es una construcción de hoja de estilo donde el bloque de declaración de estilo aborda uno o más elementos mencionados anteriormente y agrega una nueva propiedad.

El texto es difícil de entender. Es mejor tomar un ejemplo de inmediato.

H1, h2, h3 (color: azul;)
h1(tamaño de fuente:18px; )
h2(tamaño de fuente:16px; )
h3(tamaño de fuente:14px; )
En la primera línea mencionamos inmediatamente varios elementos. Para acceder a varios elementos a la vez, debe enumerarlos en el selector usando el signo , (coma) y espacio. NO es necesaria una coma ni un espacio antes del último elemento a enumerar..

Mediante menciones posteriores de estos elementos, les agregamos nuevos valores de propiedad. En este caso, tamaño de fuente.

Código HTML y CSS

Ejemplo de CSS

Rumbo h1

Rumbo h2

Rumbo h3

Como resultado, todos los títulos serán azules. Sin embargo, diferentes tamaños, porque las entradas posteriores en la hoja de estilo dieron a los títulos diferentes tamaños.

El uso de agrupaciones es un tema controvertido. Entre beneficios Cabe señalar que es posible evitar grandes partes del código, que en gran medida se duplicarán en contenido. Entre las desventajas, podemos decir que usar dicho código, donde se agregan propiedades a uno u otro elemento en diferentes lugares, es bastante problemático e inconveniente. Por supuesto, con una escritura secuencial adecuada se pueden evitar tales desventajas, pero esa es otra cuestión.

¡Gracias por su atención! ¡La lección ha terminado!

En este artículo hablaremos sobre los selectores CSS. Veremos tanto los selectores CSS antiguos, que incluso admite IE6, como los selectores CSS3 completamente nuevos, que solo admiten las últimas versiones de los navegadores. Vamos a empezar.

1.

* ( margen: 0; relleno: 0; )

Comencemos con las cosas más simples y luego pasemos a cosas más avanzadas.

Este selector CSS selecciona cada elemento de la página. Muchos desarrolladores lo utilizan para restablecer los valores de margen y relleno de todos los elementos. A primera vista, esto es conveniente, pero es mejor no hacerlo en el código de producción. Este selector de CSS es demasiado pesado para el navegador.

* también se puede utilizar para resaltar elementos secundarios.

#contenedor * (borde: 1px negro sólido;)

En este caso, se seleccionan todos los elementos secundarios de #container. Nuevamente, trate de no abusar de él.

Compatibilidad

IE6+
Firefox
Cromo
Safari
Ópera

2.#X

contenedor (ancho: 960px; margen: automático;)

Un signo de almohadilla antes del selector CSS X resaltará el elemento con id = X. Es muy simple, pero tenga cuidado al usar id.

Pregúntese: ¿Es absolutamente necesario resaltar por identificación?

Los valores de identificación bloquean el estilo firmemente al elemento y no son reutilizables. Sería preferible utilizar clases, nombres de etiquetas o incluso pseudoclases.

Compatibilidad

IE6+
Firefox
Cromo
Safari
Ópera

3.X

error(color:rojo;)

Este es un selector CSS de clase X. La diferencia entre id y clase es que una clase puede poseer varios elementos en una página. Utilice clases cuando desee aplicar un estilo a varios elementos del mismo tipo. Cuando uses id, tendrás que escribir un estilo para cada elemento individual.

Compatibilidad

IE6+
Firefox
Cromo
Safari
Cromo

4. X Y

li a (decoración de texto: ninguna;)

El selector de elementos secundarios CSS es el más común. Si necesita seleccionar elementos de un determinado tipo entre muchos elementos secundarios, utilice este selector. Por ejemplo, debe seleccionar todos los enlaces que están en el elemento li. En este caso, utilice este selector.

No deberías hacer selectores CSS comoX Y Z A B.error. Pregúntese siempre si es necesario escribir un selector CSS tan engorroso para seleccionar un elemento determinado.

Compatibilidad

IE6+
Firefox
Cromo
Safari
Cromo

5.X

a (color: rojo;) ul (margen izquierdo: 0;)

¿Qué sucede si desea cubrir todos los elementos de un tipo determinado en una página? Mantenlo simple, usa un selector de tipo CSS. Si debe seleccionar todas las listas desordenadas, utilice ul().

Compatibilidad

IE6+
Firefox
Cromo
Safari
Ópera

a:enlace ( color: rojo; ) a:visted ( color: morado; )

Usamos la pseudoclase: enlace para resaltar todos los enlaces en los que aún no se ha hecho clic.

Si necesitamos aplicar un determinado estilo a enlaces ya visitados, utilizamos la pseudoclase: visitado.

Compatibilidad

IE7+
Firefox
Cromo
Safari
Ópera

7.X+Y

ul + p (color: rojo;)

Selecciona el siguiente elemento. el elegira solo un elemento de tipo Y que viene inmediatamente después del elemento X. En el ejemplo, el texto del primer párrafo después de cada ul será rojo.

Compatibilidad

IE7+
Firefox
Cromo
Safari
Cromo

8.X>Y

div#container > ul (borde: 1px negro sólido;)

La diferencia entre el estándar X Y y X > Y es que el selector CSS en cuestión solo seleccionará elementos secundarios inmediatos. Por ejemplo, considere el siguiente código.

Elemento de lista
- elemento hijo
Elemento de lista
Elemento de lista
Elemento de lista

El selector CSS #container > ul solo seleccionará uls que sean hijos inmediatos de divs con id = contenedor. No seleccionará, por ejemplo, uls que sean hijos de los primeros li s.

Por lo tanto, puede obtener beneficios de rendimiento utilizando este selector de CSS. De hecho, esto se recomienda especialmente cuando se trabaja con jQuery u otras bibliotecas que seleccionan elementos basándose en reglas de selección de CSS.

Compatibilidad

IE7+
Firefox
Cromo
Safari
Ópera

9.X-Y

ul ~ p (color: rojo;)

Este selector CSS es muy similar a X+Y, sin embargo, es menos restrictivo. Usar ul + p seleccionará solo el primer elemento después de X. En este caso, se seleccionarán todos los p elementos que vayan a ul.

Compatibilidad

IE7+
Firefox
Cromo
Safari
Ópera

10.X

a(color:verde;)

Los selectores CSS también pueden usar atributos. Por ejemplo, en este ejemplo hemos seleccionado todos los enlaces que tienen el atributo de título. Otros enlaces no se verán afectados.

Compatibilidad

IE7+
Firefox
Cromo
Safari
Ópera

11.X

a (color: #ffde00;)

Tenga en cuenta que hay citas. No olvide hacer lo mismo en jQuery y otras bibliotecas de JavaScript en las que los elementos se seleccionan mediante selectores CSS. Siempre que sea posible, utilice siempre selectores CSS3 CSS.

Una buena regla, pero demasiado estricta. ¿Qué hacer si el enlace no lleva directamente a, sino por ejemplo a? En estos casos podemos utilizar expresiones regulares.

Compatibilidad

IE7+
Firefox
Cromo
Safari
Cromo

12.X

un (color: #1f6053; )

Compatibilidad

IE7+
Firefox
Cromo
Safari
Ópera

13.X

a (fondo: url(ruta/a/externo/icon.png) sin repetición; relleno-izquierda: 10px;)

¿Alguna vez te has preguntado cómo algunos sitios web pueden mostrar un pequeño ícono junto a enlaces externos? Estoy seguro de que los has visto antes, son muy memorables.

“^” es el carácter más utilizado en las expresiones regulares. Se utiliza para marcar el comienzo de una línea. Si queremos cubrir todas las etiquetas cuyo href comienza con http, debemos usar el selector CSS de arriba.

Tenga en cuenta que no estamos buscando "http://". Esto no es correcto porque las direcciones que empiezan por https:// no se tienen en cuenta

¿Qué pasa si queremos establecer un estilo sólo para los enlaces que conducen a una foto? Necesito encontrar fin líneas.

Compatibilidad

IE7+
Firefox
Safari
Ópera

14.X

a(color:rojo;)

Nuevamente, usamos el carácter de expresión regular “$” para indicar el final de la línea. En este, buscamos enlaces que hagan referencia a archivos jpg o URL que tengan “.jpg” al final.

Compatibilidad

IE7+
Firefox
Safari
Ópera

15.X

a(color: rojo; )

¿Cómo podemos escribir ahora un selector CSS que resalte enlaces a todo tipo de imágenes? Por ejemplo, podríamos escribir así:

A, a, a, a (color: rojo;)

Pero esto es ineficaz. Otra posible solución es utilizar atributos personalizados. ¿Por qué no agregamos nuestro propio atributo? tipo de archivo de datos en cada enlace?

Enlace de imágen

A (color: rojo; )

Compatibilidad

IE7+
Firefox
Safari
Ópera

16.X

a (color: rojo;) a (borde: 1px negro sólido;)

Aquí hay algo especial. No todo el mundo conoce este selector de CSS. La tilde (~) le permite resaltar un atributo específico de una lista de atributos separados por comas.

Por ejemplo, podemos configurar nuestro propio atributo de información de datos, que incluye varias palabras clave separadas por espacios. Así, podemos indicar que el enlace es externo y que enlaza con una imagen.

Haz click en mi

Aquí, el código HTML está en su lugar, ahora escribamos los estilos.

No está mal, ¿verdad?

Compatibilidad

IE7+
Firefox
Safari
Ópera

17. X: marcado

entrada: marcado (borde: 1px negro sólido;)

Esta pseudoclase solo resalta elementos de la interfaz de usuario, como un botón de opción o una casilla de verificación. Además, aquellos que estén marcados/seleccionados. Muy simple.

Compatibilidad

IE9+
Firefox
Safari
Ópera

18. X:después

Las pseudoclases :before y :after son geniales. Parece que cada día aparecen nuevas formas de utilizarlos de forma eficaz. Simplemente generan contenido alrededor del elemento seleccionado.

Muchas personas se familiarizaron con estas pseudoclases mientras trabajaban con el truco clear-fix.

Clearfix:después ( contenido: ""; mostrar: bloque; borrar: ambos; visibilidad: oculto; tamaño de fuente: 0; altura: 0; ) .clearfix ( *display: inline-block; _height: 1%; )

Este cortar a tajos usa :after para agregar un espacio después de un elemento y evitar que se ajuste.

Según la especificación CSS3, debes utilizar dos dos puntos (::). Sin embargo, puede utilizar dos puntos por motivos de compatibilidad.

Compatibilidad

IE8+
Firefox
Safari
Ópera

19. X: flotar

div: flotar (fondo: #e3e3e3;)

¿Quieres aplicar un estilo a un elemento cuando pasas el cursor sobre él? Entonces este CSS-selector para ti.

Tenga en cuenta que las versiones anteriores de Internet Explorer utilizan: flotar sólo para enlaces.

Este CSS-selector se utiliza a menudo para poner borde inferior a los enlaces cuando se pasa el mouse sobre ellos.

A: pasar el cursor (borde inferior: 1 px negro sólido;)

borde inferior: 1px negro sólido; se ve mejor que decoración de texto: subrayado;

Compatibilidad

IE6+ (en IE6: se debe aplicar el cursor al enlace)
Firefox
Safari
Ópera

20. X:no(selector)

div:not(#contenedor) ( color: azul; )

La pseudoclase de negación puede resultar muy útil. Digamos que necesitas seleccionar todos los divs excepto el que tiene id = envase. ¡El código anterior se encargará de esto!

O, si necesita seleccionar todos los elementos excepto la p.

*:no(p) ( color: verde; )

Compatibilidad

IE9+
Firefox
Safari
Ópera

21. X::pseudo elemento

Podemos utilizar pseudoelementos para diseñar fragmentos de elementos, como la primera línea o la primera letra. Tenga en cuenta que deben aplicarse a elementos a nivel de bloque para que surtan efecto.

Un pseudoelemento se especifica con dos dos puntos: ::

Seleccione la primera letra del párrafo.

P::primera letra ( flotante: izquierda; tamaño de fuente: 2em; peso de fuente: negrita; familia de fuentes: cursiva; relleno-derecha:2px; )

Este código seleccionará todos los párrafos y, a su vez, seleccionará las primeras letras de ellos y les aplicará este estilo.

Seleccione la primera línea de un párrafo

P::primera línea (peso de fuente: negrita; tamaño de fuente: 1,2 em;)

De manera similar, con ::first-line le damos estilo a la primera línea de un párrafo.

“Para ser compatible con las hojas de estilo existentes, el navegador debe comprender las designaciones anteriores de pseudoelementos de dos puntos introducidas en CSS 1, 2 ( :primera línea, :primera letra, :antes y:después). Esta compatibilidad no está permitida para los nuevos pseudoelementos introducidos en esta especificación"

Compatibilidad

IE6+
Firefox
Safari
Ópera

22. X: enésimo hijo (n)

li:nth-child(3) (color: rojo;)

Anteriormente, ¿no podíamos seleccionar, por ejemplo, el tercer elemento hijo? ¡El enésimo niño resuelve esto!

tenga en cuenta que enésimo niño toma un número entero como parámetro, pero no cuenta desde 0. Si desea seleccionar el segundo elemento de la lista, use li: enésimo hijo (2) .

Incluso podemos seleccionar uno de cada cuatro elementos de la lista simplemente escribiendo (0)li:nésimo hijo(4n)(/0).

Compatibilidad

IE9+
Firefox 3.5+
Safari

23. X: enésimo último hijo (n)

li:nésimo-último-hijo(2) (color: rojo;)

Qué hacer si tienes una lista enorme de elementos en ul¿Y necesita seleccionar el tercer elemento desde el final? En lugar de escribir li:nth-child(397), puedes usar enésimo-último-hijo.

Este método es casi idéntico al anterior, pero comienza desde el final.

Compatibilidad

IE9+
Firefox 3.5+
Safari
Ópera

24. X: enésimo tipo (n)

ul:nth-of-type(3) (borde: 1px negro sólido;)

Sucede que no es necesario seleccionar un elemento secundario, sino un elemento de cierto tipo.

Imagine que hay cinco listas desordenadas en una página. . Si desea aplicar el estilo solo al tercero ul, que no tiene un único identificación, necesitará usar enésimo de tipo.

Compatibilidad

IE9+
Firefox 3.5+
Safari

25. X: enésimo último de tipo (n)

ul:nth-last-of-type(3) (borde: 1px negro sólido;)

También podemos usar enésimo último de tipo, contando elementos desde el final.

Compatibilidad

IE9+
Firefox 3.5+
Safari
Ópera

26. X: primer hijo

ul li:primer hijo (borde superior: ninguno;)

Esta pseudoclase selecciona el primer elemento hijo. A menudo se utiliza para eliminar bordes del primer y último elemento de una lista.

Compatibilidad

IE7+
Firefox
Safari
Ópera

27. X: último hijo

ul > li:último hijo (color: verde;)

A diferencia de :primer-hijo:último-hijo selecciona el último elemento hijo.

Compatibilidad

IE9 + (Sí, sí, IE8 admite:first-child, pero no admite:last-child. ¡Hola Microsoft!)
Firefox
Safari
Ópera

28. X: hijo único

div p: hijo único (color: rojo;)

No se ve esta pseudoclase muy a menudo, pero de todos modos existe.

Le permite seleccionar elementos que son los únicos hijos. Por ejemplo, aplique el estilo anterior a este código html:

Un parrafo.

Dos párrafos

Solo se seleccionará p del primer div porque es el único elemento secundario.

Compatibilidad

IE9+
Firefox
Safari
Ópera

29. X: único de tipo

Una pseudoclase muy interesante. Afecta a elementos que no tienen vecinos dentro del elemento padre. Como ejemplo, seleccionemos una ul con un solo elemento en la lista.

La única solución es utilizar único de tipo .

Ul > li:solo-de-tipo (peso de fuente: negrita;)

Compatibilidad