Selectores CSS
Los selectores en CSS permiten indentificar los elementos HTML a los que queremos aplicarles un estilo. Existen numerosos métodos de selección, lo que nos permite una mayor precisión a la hora de seleccionar elementos.
Requisitos: Nociones básicas de CSS (type: entry-hyperlink id: 0dmhcvGwFKubwaTrpiZ1f) y de HTML (type: entry-hyperlink id: 2TAtbNqHOHWCjS6r0HNmvq).
Selectores Básicos
Selector de tipo
Selecciona todos los elementos de un tipo especifico:
p{
Color: red;
}
De esta manera el selector aplica el color rojo a todos los párrafos del documento que tengan el elemento <p>.
Selector de clase
Selecciona todos los elementos con un mismo nombre de clase usando un punto (‘.’) antes de indicar el nombre de la clase:
.title{
Font-size: 24px
}
De esta manera todos los elementos con la clase “title” obtendrán un tamaño de fuente de 24px.
Selector de ID
Este selector selecciona un elemento con un ID especifico. Usa un símbolo de almohadilla (‘#’) antes de indicar el ID:
#headline{
Text-align:right
}
De esta manera todos los elementos que contengan el ID “headline” tendrán una alineación derecha.
Selector de atributo
Se utiliza para seleccionar todos los elementos que correspondan a un atributo especifico o a un valor de atributos definidos.
Existen varias maneras de utilizar el selector de atributo, algunas de las formas posibles son las siguientes:
[attribute]: Selecciona elementos que tienen el atributo especificado, sin importar su valor.
[attribute="value"]: Selecciona elementos cuyo atributo tiene exactamente el valor especificado.
[attribute~="value"]: Selecciona elementos cuyo atributo contiene una lista de valores separados por espacios, y uno de esos valores es el especificado.
[attribute^="value"]: Selecciona elementos cuyo atributo comienza con el valor especificado.
[attribute$="value"]: Selecciona elementos cuyo atributo termina con el valor especificado.
[attribute*="value"]: Selecciona elementos cuyo atributo contiene el valor especificado en cualquier parte.
[attribute|="value"]: Selecciona elementos cuyo atributo tiene un valor igual o comienza con el valor especificado seguido por un guion (-).
Por ejemplo si queremos aplicar un subrayado a todos los enlaces que comienzan con ‘http’ podemos hacer lo siguiente:
a[href^="http"] {
text-decoration: underline;
}
Selector de pseudo-clase
Este selector permite aplicar estilos a una selección de elementos que se encuentran en un estado especifico. Por ejemplo la pseudoclase :hover, selecciona elementos solo cuando se pasa el ratón por encima.
A:hover{
Color: orange;
}
En este caso cuando pasemos el mouse por encima de un elemento <a>, este cambiara de color a naranja.
Selector de pseudo-elementos
Los pseudo-elementos seleccionan una parte especifica del elemento. Por ejemplo ::before se utiliza para insertan contenido antes del contenido de un elemento HTML o ::first-line que se utiliza para seleccionar la primera línea del texto que se encuentra dentro de un elemento.
P::first-line{
Font-size: 14px;
}
En este caso solo la primera línea del párrafo adoptara un tamaño de 14px.
Selectores combinados
Los selectores combinados permiten seleccionar elementos en base a su relación con otros elementos:
Div h2{
Margin-left: 2px;
}
Este selector aplica un margen izquierdo de 2px a todos los h2 que formen parte de un div.
Con los selectores mencionados podemos aplicar estilos CSS de manera específica y flexible, mejorando la presentación de nuestra pagina/aplicación web.