Hoja de trucos y detalles de selectores CSS

hoja de trucos de selectores CSS

Recientemente, me he sumergido en selectores CSS.

Hay tantos selectores CSS con símbolos desconocidos,>. , * + ~ [] etc., así que a menudo me confundía cómo funcionan los selectores CSS. Finalmente, los enderecé en mi cabeza y los rediseñé como los entiendo.

* De hecho, hubiera querido organizarlos en una sola página de tamaño A4 para guardar papeles y salvar la Tierra, pero no pude, porque hay tantos selectores que quería agregar, así que tuve que pasar por más de una página . Son las cuatro páginas A4, excepto las portadas.

Imprime esta hoja de trucos y pégala en la pared. No los memorices, solo espiando. Espero que esta infografía lo ayude a encontrar rápidamente los selectores CSS adecuados y le ahorre tiempo.

Hoja de trucos de selectores CSSJuego de selectores CSS de Ryan Yu

Ve a descargar la hoja de trucos de selectores CSS y disfruta del juego🕹

Sin preocupaciones. Todo es gratis.

Sumérgete en el selector CSS.

Enumeraré la infografía junto con las definiciones de MDN para facilitarle las cosas.

Selector de tipo

El selector de tipo CSS hace coincidir elementos por nombre de nodo. En otras palabras, selecciona todos los elementos del tipo dado dentro de un documento. - MDN

Selector de tipo

Selector de ID

Selecciona un elemento en función del valor de su atributo id. Debe haber solo un elemento con una ID dada en un documento. - MDN

Selector de ID

Selector descendiente

Cualquier elemento que coincida con B que sea un descendiente de un elemento que coincida con A (es decir, un hijo o un hijo de un hijo, etc.). El combinador es uno o más espacios o doble mayor que los signos. - MDN

Selector descendiente

Combina los Descendientes y los Selectores de ID

Combina los Descendientes y los Selectores de ID

Selector de clase

El selector de clase CSS coincide con elementos basados ​​en el contenido de su atributo de clase. - MDN

Selector de clase

Combina el selector de clase

Combina el selector de clase

Combinador de coma

Cualquier elemento que coincida con A y / o B. - MDN

Combinador de coma

El selector universal

¡Solo selecciona todo!

El selector universal

Combina el selector universal

Combina el selector universal

Selector de hermanos adyacentes

El combinador hermano adyacente (+) separa dos selectores y hace coincidir el segundo elemento solo si sigue inmediatamente al primer elemento, y ambos son hijos del mismo elemento padre. - MDN

Selector de hermanos adyacentes

Selector general de hermanos

El combinador general de hermanos (~) separa dos selectores y hace coincidir el segundo elemento solo si sigue al primer elemento (aunque no necesariamente de forma inmediata), y ambos son hijos del mismo elemento padre. - MDN

Selector general de hermanos

Selector de niños

El combinador secundario (>) se coloca entre dos selectores CSS. Solo coincide con aquellos elementos que coinciden con el segundo selector que son hijos de elementos que coinciden con el primero. - MDN

Selector de niños

Primer pseudo-selector infantil

La pseudoclase: first-child CSS representa el primer elemento entre un grupo de elementos hermanos. - MDN

Primer pseudo-selector infantil

Solo pseudo-selector infantil

La pseudoclase: only-child CSS representa un elemento sin hermanos. Esto es lo mismo que: first-child: last-child o: nth-child (1): nth-last-child (1), pero con una especificidad más baja. - MDN

Solo pseudo-selector infantil

Pseudo-selector del último hijo

La pseudoclase CSS last-child representa el último elemento entre un grupo de elementos hermanos. - MDN

Pseudo-selector del último hijo

Nse Pseudo-selector infantil

La pseudo-clase CSS nth-child () hace coincidir elementos en función de su posición en un grupo de hermanos. - MDN

Nse Pseudo-selector infantil

Nth Last Child Selector

La pseudo-clase CSS nth-last-child () coincide con los elementos en función de su posición entre un grupo de hermanos, contando desde el final. - MDN

Nth Last Child Selector

Primero del selector de tipo

La pseudoclase: first-of-type CSS representa el primer elemento de su tipo entre un grupo de elementos hermanos. - MDN

Primero del selector de tipo

Nth of Type Selector

La pseudo-clase CSS nth-of-type () coincide con elementos de un tipo dado, en función de su posición entre un grupo de hermanos. - MDN

Nth of Type Selector

Selector de enésimo tipo con fórmula

Selector de enésimo tipo
 Nota:
: enésimo tipo (par)
: enésimo tipo (impar)
: enésimo tipo (2)
: enésimo tipo (2n)
: enésimo tipo (3n-1)
: enésimo tipo (2n + 2)

Solo del selector de tipo

La pseudoclase CSS de solo tipo representa un elemento que no tiene hermanos del mismo tipo. - MDN

Solo del selector de tipo

Último selector de tipo

La pseudoclase: last-of-type CSS representa el último elemento de su tipo entre un grupo de elementos hermanos. - MDN

Último selector de tipo

Selector vacío

La pseudo-clase CSS vacía representa cualquier elemento que no tiene hijos. Los elementos secundarios pueden ser nodos de elementos o texto (incluido el espacio en blanco). Los comentarios, las instrucciones de procesamiento y el contenido CSS no afectan si un elemento se considera vacío. - MDN

Selector vacío

Pseudo-clase de negación

La pseudoclase CSS: not () representa elementos que no coinciden con una lista de selectores. Como evita que se seleccionen elementos específicos, se conoce como la pseudoclase de negación. - MDN

Pseudo-clase de negación

Selector de atributos

Los selectores de atributos son un tipo especial de selector que emparejará elementos basados ​​en sus atributos y valores de atributo. Su sintaxis genérica consiste en corchetes ([]) que contienen un nombre de atributo seguido de una condición opcional para que coincida con el valor del atributo. Los selectores de atributos se pueden dividir en dos categorías según la forma en que coinciden con los valores de los atributos: selectores de atributos de presencia y valor y selectores de atributos de valor de subcadena. - MDN

Selector de atributos

Selector de valor de atributo

Selector de valor de atributo

El atributo comienza con el selector

Este selector seleccionará todos los elementos con el atributo attr para el cual el valor comienza con val. - MDN

El atributo comienza con el selector

El atributo termina con el selector

Este selector seleccionará todos los elementos con el atributo attr para el cual el valor termina con val. - MDN

El atributo termina con el selector

Selector de comodines de atributos

Este selector seleccionará todos los elementos con el atributo attr para el que el valor contiene la subcadena val. (Una subcadena es simplemente parte de una cadena, por ejemplo, "cat" es una subcadena en la cadena "caterpillar"). - MDN

Selector de comodines de atributos

Felicitaciones, has completado

Artículos

🕹 CodePen

Cualquier pregunta o comentario

Me encantaría escuchar sus comentarios sobre cómo puedo mejorarlo para usted. Por favor, deje sus comentarios a continuación o a través de mi Twitter.

Muchas gracias a Ryan Yu por ayudarme a hacer un juego de selectores CSS. Ryan Yu es el autor de donde aprendí muchas técnicas interesantes de front-end.

Feliz código hoy