Post Top Ad

Your Ad Spot

jueves, 8 de octubre de 2020

Tutorial de selectores CSS

 


Los selectores son realmente uno de los conceptos más importantes que puede aprender en el desarrollo web. No puede diseñar nada en una página web sin primero usar un selector para apuntar a los diversos elementos. Además, también puede usar selectores CSS de muchas otras formas interesantes en varios lenguajes de programación. Entonces, para este tutorial, aprenderemos todo sobre los selectores CSS. Veremos los selectores simples como Tipo, Clase, ID, Universal y Basado en atributos. Luego veremos combinadores como el combinador descendiente, el combinador de niños, el combinador de hermanos adyacentes y el combinador general de hermanos. Finalmente, veremos cómo usar Pseudo Clases y Pseudo Elementos.


Selectores simples

Los selectores CSS simples son selectores que se utilizan con más frecuencia y cubren una buena cantidad de casos de uso. Los selectores CSS simples incluyen seleccionar por el nombre de la etiqueta HTML, seleccionar por un ID específico, seleccionar con un nombre de clase y seleccionar usando varias combinaciones de atributos. Puede llegar bastante lejos con solo estos sencillos selectores de CSS.


Selector de tipo

También conocido como selector de elementos , el selector de tipo apunta a todos los elementos que coinciden con el nombre de nodo dado. Esto le permite seleccionar todos los elementos <p> o todos los elementos <div> a la vez.

elemento {propiedades de estilo css}


Ejemplo de selector de tipo

Ejemplo de selector CSS de tipo (elemento)


Selector de ID

El selector de ID selecciona el elemento HTML en función del valor contenido en su idatributo. Se utiliza un selector de ID cuando desea apuntar a un elemento específico en la página web.

#id_value {propiedades de estilo CSS}


Ejemplo de selector de ID

Ejemplo de selector de ID de CSS


Selector de clases

Algunos dicen que el selector de clases es el más útil de los selectores CSS disponibles. De hecho, casi todos los marcos CSS modernos le permiten diseñar elementos simplemente aplicando un nombre de clase. Es útil tener muchos elementos en la misma página que comparten una clase determinada. Esto ayuda a permitir la reutilización de estilos que conducen a una menor repetición en el código CSS.

.class_name {propiedades de estilo css}


Ejemplo de selector de clases

Ejemplo de selector de clases CSS


Selectores de atributos

Los corchetes se utilizan para crear un selector de atributos en CSS. Este selector selecciona etiquetas en función de la existencia o el valor de un atributo HTML. Hay varios tipos de selectores de atributos en CSS.


[atributo]

El selector [atributo] se utiliza para apuntar a elementos en la página web con el atributo dado.

[atributo] {propiedades de estilo CSS}


[atributo] Ejemplo de selector

Ejemplo de selector de [atributo] CSS


[attr = value]

El selector [atributo = valor] se utiliza para orientar elementos en la página web con el atributo dado y el valor especificado.

[atributo = valor] {propiedades de estilo CSS}


[atributo = valor] Ejemplo de selector

Ejemplo de selector de CSS [atributo = valor]


[atributo ~ = valor]

El selector [atributo ~ = valor] se utiliza para seleccionar elementos que tienen un valor de atributo que contiene una palabra específica.

[atributo ~ = valor] {propiedades de estilo css}


[atributo ~ = valor] Ejemplo de selector

[atributo ~ = valor] CSS Ejemplo de selector


[atributo | = valor]

El selector [atributo | = valor] apunta a elementos con un valor de atributo que puede ser exactamente como se indica o puede comenzar con el valor seguido inmediatamente por un guión.

[atributo | = valor] {propiedades de estilo css}


[atributo | = valor] Ejemplo de selector

atributo pipe equal CSS Selector Ejemplo


[atributo ^ = valor]

El [atributo ^ = valor] tiene un operador de intercalación (^), que significa "comenzar con". Esto apuntará a los elementos de la página donde el atributo dado comienza con un valor específico. Por ejemplo, es posible que pueda seleccionar todos los enlaces de la página que son externos o internos y hacer que el color de fondo sea azul claro.

[atributo ^ = valor] {propiedades de estilo CSS}


[atributo ^ = valor] Ejemplo de selector

ejemplo del selector de atributo css equals caret


[atributo $ = valor]

Este selector de atributo hace uso del signo de dólar que es el opuesto al ejemplo anterior. Mientras que el signo de intercalación significa comenzar con, el símbolo $ significa "termina con". Un caso de uso para esto podría ser apuntar a enlaces en la página que enlazan a un documento PDF.

[atributo $ = valor] {propiedades de estilo css}


[atributo $ = valor] Ejemplo de selector

CSS termina con un ejemplo de selector de atributos


[atributo * = valor]

El selector de subcadena de atributos final que veremos hace uso del *operador asterisco ( ), que significa "contiene".

[atributo * = valor] {propiedades de estilo css}


[atributo * = valor] Ejemplo de selector

css contiene un ejemplo de selector de atributo de subcadena


Selector universal

* {propiedades de estilo CSS}


Ejemplo de selector universal

El asterisco se usa a menudo como una especie de carácter comodín, y cuando se usa como selector de CSS, eso es exactamente lo que es. El selector universal selecciona todos los elementos de la página web a la vez. No es algo que usaría con frecuencia, pero es bueno para restablecer el tamaño de la caja en los diseños para representar mejores anchos y alturas. A menudo verá que una hoja de estilo usa el selector universal para establecer el margen y el relleno en 0. Esto le da el mismo punto de partida para un diseño de página sin importar qué tipo de navegador, dispositivo o sistema operativo se esté usando.

ejemplo de selector universal css


Selectores de combinador

Los selectores de combinación en CSS son el siguiente nivel de granularidad al seleccionar elementos de página en CSS. Los combinadores se utilizan para apuntar a hijos, nietos, bisnietos o más tarde de un elemento dado en el árbol de documentos. Los símbolos utilizados para los combinadores incluyen el carácter de espacio  , el carácter mayor que >, el signo más +y la tilde ~.


Combinador descendiente

El combinador descendiente es en realidad un espacio vacío (  ). El patrón de este combinador es simplemente dos etiquetas una al lado de la otra con un espacio entre ellas. Selecciona elementos que son descendientes del primer elemento.

etiqueta etiqueta {propiedades de estilo css}


Ejemplo de selector de combinador descendiente

En este ejemplo, hay cuatro elementos <li> en la página. Sin embargo, solo los dos que son descendientes del <div> son el objetivo.

Ejemplo de selector de combinador descendiente


Combinador de niños

El combinador hijo usa el >operador mayor que ( ) y apunta a elementos que son hijos inmediatos del padre. La diferencia entre los selectores de descendientes y secundarios es que el combinador de niños es más específico. Solo seleccionará elementos secundarios directos de la primera etiqueta. Sin embargo, el Descendant Combinator es más liberal. No solo seleccionará a los hijos de la primera etiqueta, sino que también seleccionará a los nietos, bisnietos, etc.

etiqueta> etiqueta {propiedades de estilo CSS}


Ejemplo de selector de combinador infantil

Ejemplo de selector de combinador infantil

Observe la diferencia ahora si usamos el Descendant Combinator ( div p) en lugar del Child Combinator ( div > p). Tenga en cuenta ahora que el tercer párrafo, que es un nieto del <div>, todavía está dirigido.

ejemplo de combinador descendiente vs combinador hijo


Combinador de hermanos adyacentes

El combinador de hermanos adyacentes utiliza el signo más ( +) y apunta a los elementos que están uno al lado del otro en el árbol del documento que tienen el mismo padre. En otras palabras, la segunda etiqueta sigue directamente a la primera y comparten el mismo elemento principal.

etiqueta + etiqueta {propiedades de estilo css}


Ejemplo de selector de combinador de hermanos adyacentes

Entonces, en este ejemplo h2 + papunta a cada elemento <p> que se coloca inmediatamente después de un elemento <h2>.
Ejemplo de selector de combinador de hermanos adyacentes


Combinador general de hermanos

El General Sibling Combinator utiliza el ~operador tilde ( ). Se diferencia del Combinador de hermanos adyacentes en que el segundo selector no tiene que seguir inmediatamente al primero. Ambos elementos deben compartir el mismo padre.

tag ~ tag {propiedades de estilo CSS}


Ejemplo de selector de combinador general hermano

Tanto <h1> como <section> comparten <div> como el mismo padre. Tenga en cuenta que hay un <p> <em> entre </em> la <h1> y la <sección>. El combinador de hermanos general ignora ese <p> y apunta a la <sección>.

Selector general de combinador de hermanos


Pseudo clases

Las pseudoclases se utilizan para apuntar a elementos en la página web basándose en información de estado que no forma parte del árbol del documento. Primero veremos las pseudoclases estructurales .

Pseudoclases estructurales

Las pseudoclases estructurales son una forma poderosa de apuntar a elementos en el DOM que, de otra manera, no podrían apuntar sin agregar ID o clases adicionales. El uso de pseudoclases estructurales está destinado a minimizar la adición de clases extrañas en su marcado HTML, manteniendo así sus diseños más limpios y fáciles de manejar.


: Selector de primer hijo

El :first-childselector le permite apuntar al primer hijo de un elemento especificado en el árbol del documento.

: first-child {propiedades de estilo css}


: Ejemplo de selector de primer hijo

ejemplo de selector de primer hijo de CSS


: Selector de último hijo

El selector: last-child apunta a cualquier elemento que sea el último hijo de su elemento padre.

: last-child {propiedades de estilo css}


: Ejemplo de selector de último hijo

selector de último hijo css


: selector de nth-child

El selector: nth-child le permite seleccionar uno o más elementos secundarios específicos de un elemento principal determinado. Puede tomar la forma de un número (entero), palabras clave (pares o impares) o un cálculo (expresión).

: nth-child {propiedades de estilo css}


: nth-child Selector Ejemplo 1

nth-child entero ejemplo 1


: nth-child Selector Ejemplo 2

nth child even ejemplo 2


: nth-child Selector Ejemplo 3

nth child selector de css impar


: nth-child Selector Ejemplo 4

  • a es un valor entero
  • n es la letra literal "n"
  • + es un operador y también puede ser un -
  • b es un número entero y es obligatorio si se incluye un operador en la fórmula

css nth child ejemplo de fórmula


: Selector nth-last-child

El selector: nth-last-child funciona igual que el selector: nth-child excepto a la inversa. Es decir que: nth-last-child comienza a contar desde el último elemento.

: nth-last-child {propiedades de estilo CSS}


: nth-last-child Selector Ejemplo 1

nth-last-child con número entero


: nth-last-child Selector Ejemplo 2

nth-last-child even example


: nth-last-child Selector Ejemplo 3

nth-last-child-impar


: nth-last-child Selector Ejemplo 4

nth-child-last-an + b


: Selector de hijo único

El selector: only-child apunta a un elemento que no tiene ningún elemento hermano. En otras palabras, funciona apuntando a cualquier elemento que sea el único hijo de su padre.

: only-child {propiedades de estilo CSS}


: Ejemplo de selector de hijo único

ejemplo de selector de hijo único de CSS


: Selector de primer tipo

El selector: first-of-type apunta al primer elemento de este tipo dentro de cualquier padre. Entonces, si tiene dos divs, cada uno tenía dentro un párrafo, div, div y ul. Entonces div div: first-of-type seleccionaría el primer div dentro del primer div y el primer div dentro del segundo div.

: primero de tipo {propiedades de estilo css}


: Ejemplo de selector primero de tipo

selector css primero de tipo


: Selector de último tipo

El Selector: last-of-type funciona igual que el Selector: first-of-type, excepto que se apunta al último del tipo de elemento especificado.

: último de tipo {propiedades de estilo CSS}


: último ejemplo de selector de tipo

css selector de clase psudo de último tipo


: Selector de enésimo de tipo

El selector: nth-of-type funciona de manera similar a: nth-child y usa la misma sintaxis. A veces es más útil que: nth-child si hay elementos entre aquellos a los que se dirige. Por ejemplo, si dentro de un div tienes varios párrafos y varios divs. Si quisiera seleccionar todos los divs pares,: nth-child no funcionará allí, pero podría usar div div: nth-of-type (even).

: nth-of-type {propiedades de estilo CSS}


: Ejemplo de selector de enésimo tipo

ejemplo css nth-of-type


: Selector enésimo último de tipo

El selector: nth-last-of-type funciona igual que el selector: nth-of-type pero comienza al final en lugar del principio.

: nth-last-of-type {propiedades de estilo CSS}


: Ejemplo de selector nth-last-of-type

css selector de enésimo último tipo


: Selector único de tipo

El selector: only-of-type apunta a elementos donde los elementos principales no tienen otros elementos secundarios del mismo tipo.

: solo de tipo {propiedades de estilo CSS}


: Ejemplo de selector de tipo único

solo de ejemplo de tipo css


: selector vacío

El selector: empty puede ser una pseudoclase útil. Representa un elemento de la página web que no tiene contenido. Imagina que hay un widget generado dinámicamente en tu página que a veces no tiene contenido, dependiendo de varios factores. Si está vacío, podemos ocultarlo usando: vacío.

Para completar, también hay una pseudoclase estructural : raíz que apunta a la raíz del documento. Probablemente no haya muchos casos de uso para el selector: root, pero es bueno saber que existe.


Pseudo elementos

Los pseudoelementos son elementos que se pueden ver en una página web pero que técnicamente no están "en el DOM" por así decirlo. En cambio, se insertan directamente desde CSS. Es como tener una versión de jQuery de baja potencia integrada en CSS. Los pseudo elementos le permiten hacer muchos pequeños trucos de diseño sin saturar el marcado. Al principio, puede ser fácil confundir las pseudo clases que discutimos anteriormente y los pseudo elementos. Observe arriba que todos los selectores comenzaron con dos puntos ( :). Esa es la firma de una pseudoclase. Los pseudoelementos, por otro lado, siempre usan dos puntos dobles ( ::).


:: antes del pseudoelemento

:: antes de {propiedades de estilo CSS}

:: before crea contenido justo antes del elemento seleccionado. :: before se usa a menudo para agregar contenido cosmético simple a un elemento que usa la contentpropiedad.


:: antes de Ejemplo de pseudoelemento

CSS antes del ejemplo de pseudo elemento


:: después de Pseudo Elemento

El pseudo elemento :: after funciona igual que :: before, excepto que el contenido se agrega después del elemento de destino.

:: después de {propiedades de estilo css}


:: después del ejemplo de pseudoelemento

CSS después del ejemplo de pseudo elemento


:: Pseudoelemento de primera línea

El selector :: first-line apunta a la primera línea de un elemento a nivel de bloque. El efecto puede ser dinámico ya que la longitud de la primera línea depende de muchos factores, como el ancho del elemento, el ancho de la página y el tamaño de fuente en uso.

:: first-line {propiedades de estilo css}


:: Ejemplo de pseudoelemento de primera línea