Selectores CSS

En un documento hay muchísimos elementos a los cuales se les puede aplicar estilos CSS, dependiendo de la forma de trabajo y orden que utilices en tu código algunos pueden tener beneficios, vamos a conocer los más comunes e importantes.

Etiquetas HTML

Las etiquetas HTML son los diferentes elementos que conforman la estructura de un sitio web, es importante resaltar que solo se les puede aplicar estilos CSS a las etiquetas que van dentro de la etiqueta body. Por ejemplo, si queremos cambiar el color a todas las etiquetas de título principal “H1” y aun párrafo “P” definidas en cualquier parte del documento debemos hacerlo de la siguiente manera.


h1 { 1
    color: white;2
}3
4
p {5
    color: white;6
}7

Clases “Class CSS”

Las clases en CSS son las más utilizadas al momento de definir un estilo personalizado a un elemento en HTML, la manera de utilizarlas es muy simple y se basa en definir en cualquier etiqueta del body el atributo class y a este definirle un valor con el que vamos a identificarlo en nuestra hoja de estilos < p class=”parrafo” >< / p >.


.parrafo {1
    color: white;2
}3

Identificadores (ID)

Los identificadores o IDs son nombres únicos que se le dan a elementos HTML, estos deben ser únicos en el documento, no debe existir un id igual a otro, estos se utilizan más que todo para desarrollo web, esto no quiere decir que no se pueda usar en CSS para darle estilos a un elemento, en este caso su particularidad es que los estilos que apliques solo va a aplicarse en el elemento que tenga el ID.


#parrafo {1
    color: white;2
}3

Agrupar selectores CSS

Es muy útil y común utilizar algunos estilos de forma grupal entre varios selectores ya que pueden compartir el mismo formato, color o espacios entre el sitio web.


h1, h2, h3 {1
    color: white;2
}3

Selector descendente

Estos selectores son muy útiles ya que se usan para definir algunas reglas a elementos que están dentro de otro al cual se le conoce como padre, lo interesante de este tipo de selectores es que no importa en nivel donde se encuentre el elemento en el HTML, así este dentro de múltiples etiquetas se aplicaran los estilos.


header nav {1
    width:: 800px;2
}3

Selector descendente directo

Los estilos solo se aplican al primero hijo, si existen etiquetas con el mismo nombre, pero en un nivel más bajo no serán aplicados.


section > h1 {1
    color: red;2
}3

Selector hermano

Las reglas definidas serán aplicadas al hermano que este al mismo nivel y justo al lado, este tipo de estilos son muy útiles para definir diseños dependiendo de los elementos que este junto a los otros o dentro de los otros.


h1 + h2 {1
    color: blue;2
}3

Selector de atributos

Estos selectores son un poco avanzados y muy útiles, estos se pueden aplicar a cualquier etiqueta y suelen usarse de forma avanzada para aplicaciones web y para añadir reglas de estilos a elementos que tenga ciertos atributos o estados.


[href] {1
    color: white;2
}3