Selectores de CSS

Last updated Jul 20, 2023 Edit Source

• Programming
• Frontend
• Css

Es una forma dentro de una hoja de estilos que nos sirve para referirnos a un bloque de etiquetas en particular.

1

h2 {} /*El selector aqui es h2*/

Una forma de pensar en ellos es como queries. Debido a que hacen busqueda dentro del HTML en busqueda de los distintos selectores especificos para aplicar al documento.

Es el proceso por el cual se resuelven conflictos y ambiguedades cuando una misma propiedad de un mismo elemento es declarada dos veces.

El orden para aplicar un estilo cuando hay conflictos es el siguiente:

^84c080

Enrte los Selectores de CSS existe una Jerarquia, de modo que, si tenemos una misma propiedad de un mismo elemento se seguira la siguiente jerarquia para computar un estilo de aplicaciones:

1. Estilos en Linea (Marcados con style="" en el elemento HTML)
2. IDs (Marcados con la propiedad id="" en el elemento HTML)
3. Clases, pseudoclases y atributos (Marcados de distintas formas, clases class="", pseudoclases en CSS como :hover, :active, :visited y atributos referidos en CSS como a[href="https://google.com.mx"])
4. Elementos y pseudoelementos (Marcados por sus etiquetas de HTML como a, div, p y pseudoelementos marcados en CSS por los dobles colon como ::after, ::before, ::firstletter).

La especificidad tambien ayuda a determinar los estilos en el proceso de Cascade. Siempre se aplican los estilos del selector que sume la mayor cantida de puntos.

1. Declaracion de valores.
2. Proceso de Cascade para determinar valores finales
3. Valor especificado. Valor Computado heredado del padre (En caso de aplicar) o valor por defecto de una propiedad de CSS (Solo relevante si no se tiene un valor definido)
4. Valor Computado. Valor computado resultado de las unidades relativas, otras cosas como los colores por keywords (red, orange, etc) se pasan a hexadecimal, porcentajes a px, etc.
5. Valor usado. Se usa el render layout para determinar los valores reales finales de algunas cosas que quedaron sin calcular aun (Como las unidades por %)
6. Valor actual. Es el valor real que se utiliza en el display, se redondean valores aproximados y se utilizan integers para representar en el DOM.

Es un proceso por el cual los estilos de un elemento padre pasa al elemento hijo. Hay algunas propiedades que se heredan y otras muchas que no, esto depende en cada propiedad especifica.

Para determinar valores computados se utilizan distintos procesos de calculo:

• Porcentaje (%) en Fuentes. Se hace relativo al valor computado font-size del padre.
• Porcentaje (%) en Mediciones. Se hace relativo al valor computado WIDTH que posee el padre.
• EM en Fuentes. Se hace relativo al valor computado DE FUENTE que posee el padre
• EM en Mediciones. Se hace relativo a los valores computados DE FUENTE que posee EL ELEMENTO ACTUAL.
• REM en Fuentes y Mediciones. Se hacen relativo al valor computado DE FUENTE que posee el documento en si (root)
• VH. Unidad equivalente al 1% del Viewport Height (Altura que tiene el display del dispositivo)
• VW. Unidad equivalente al 1% del Viewport Width (Altura que tiene el display del dispositivo)

Dentro de los tres mas basicos tenemos:

• id
• clase
• elemento

Estos tres corresponden a los atributos que se pueden agregar a cualquier etiqueta dentro de HTML. id="", class="" y el nombre propio de cada etiqueta <h2> <p>, etc

Para seleccionar un ID basta cone scribir como primer caracter #.

1
2
3

#id {

}

Para seleccionar una clase se utiliza como primer caracter el . para marcar que se trata de una clase.

1
2
3

.class {

}

Para seleccionar un elemento basta con escribir el nombre de la etiqueta en particular dentro de la hoja de estilos

1
2
3

p {

}

Entre algunos de los selectores avanzados tenemos:

• pseudo-clases
• atributo
• global

Las pseudoclases son una familia de selectores los cuales sirven para referenciar de forma dinamica un elemento bajo distintos estados. Algunos de ellos pueden ser:

• :visited
• :active
• :hover
• :nth-child
• ::after
• ::before

Estos son utilizados para añadir otros estilos cuando el mismo elemento se encuentra en sus diferentes estados, de esta forma podemos añadirle (por ejemplo) enfasis a un elemento

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

button {
	background-color: white;
	color: black;
	transition: all 350ms;
}

button:hover {
	background-color: black;
	color: white;
}

Los pseudoelementos son una familia de selectores los cuales se refieren a elementos virtuales o reales que se encuetran adyacentes al elemento actual al que te estas refiriendo, algunos de estos sirven para computar cosas como estilos en la primera linea, estilos en la primer letra, insertar un elemento justo antes o despues de otro.

De esta forma podemos añadir estilos de forma dinamica basada en el estado que tenga un elemento dentro del CSSOM.

1
2
3
4

button::first-letter {
	color: red;
	text-transform: capitalize;
}

Existe un comodin especial que sirve para seleccionar todo a lo que nos referimos en determinado contexto.

El simbolo del comodin especial es *.

1
2
3

* {
	color: red; /* Bajo este contexto estamos seleccionando todo el documento HTML*/
}