Los selectores son lo que definen sobre qué elementos se aplican las reglas.
Pueden ser una combinación de:
- Nombre de etiquetas HTML
- Nombres de clases, precedidos por carácter “.”
- Identificador de elemento, precedido por carácter “#”
En este ejemplo, podemos ver las siguientes reglas:
- Todas las etiquetas
<a>serán de color rojo(red). - Todos los elementos de clase ejemplo_clase tendrán un color de fondo rojo (red)
- El elemento con el identificador ejemplo_identificador tendrá un borde sólido de 1 pixel de ancho, de color rojo (red)
En este ejemplo, vemos como la regla afectará a todas las etiquetas <a> que tengan especificadas la clase selected.
Otra posibilidad es definir en el selector condiciones de anidamiento, esta regla afectará a ciertos elementos dentro de otros elementos, separados por espacios.
Con esto se pueden combinar múltiples selectores (clases, identificadores y etiquetas), dando lugar a reglas como esta:
[codepen_embed height=»268″ theme_id=»22181″ slug_hash=»VeqYjv» default_tab=»css» user=»tutorialmonsters»]See the Pen VeqYjv by Alvaro (@tutorialmonsters) on CodePen.[/codepen_embed]En este ejemplo podemos ver como todos los elementos <a> que tengan especificada la clase boton, y que estén dentro del elemento con identificador ejemplo_identificador, tendrán de color de fondo azul (blue), el color de texto será blanco (white), los bordes serán redondeados con un radio de 7 píxeles y tendra un padding de 10px.
Si tuviéramos todas las reglas de los ejemplos anteriores juntas, tendríamos mas de un sitio donde se define el color de ciertos enlaces. Cuando pase esto, el orden de precedencia es el siguiente:
- Son más prioritarias las reglas más específicas
- Cuando dos reglas tienen el mismo peso, prima la última regla especificada.
Para saber cuales son mas especificas se hace de la siguiente manera
- Contamos el número de atributos IDENTIFICADOR en el selector
- Contamos el número de atributos CLASS en el selector
- Contamos el número de atributos ETIQUETAS en el selector
Colocamos los tres números que hemos obtenido en ese orden sin espacios ni comas para obtener un número de tres dígitos. (Puede que necesitemos convertir los números a una base mayor para terminar con tres dígitos.)
El número que obtenemos determina la especificidad, donde los números más altos priman sobre los más bajos.
Vamos a ver como quedarían ordenados los selectores de nuestros ejemplos anteriores ordenados por especificidad:
#jemplo_identificador a.boton{xxx} → identificadores=1, clases=1, etiquetas=1 → especificidad = 111
a.selected{xxx} → identificadores=0, clases=1, etiquetas=1 → especificidad = 011
a{xxx} → identificadores=0, clases=0, etiquetas=1 → especificidad = 001
Otra posibilidad que nos podemos encontrar es que queramos aplicar unas mismas propiedades a diferentes selectores, podemos hacerlo separando los selectores diferentes por comas, como en el siguiente ejemplo.
section.titulo h1, section.titulo h2, section.titulo h3 {
color: green;
}
En este ejemplo se establece que el color de texto de los elementos <h1>, <h2>, <h3> que se encuentren dentro de una etiqueta <section> con la clase titulo, sera verde (green).
Otra característica que podemos utilizar en los selectores son los pseudo clases mediante el carácter “:”, que nos permiten seleccionar solo los elementos en un estado concreto, o las especificaciones de valores de atributos, que se incluyen entre corchetes “[“ y “]”.
[codepen_embed height=»268″ theme_id=»22181″ slug_hash=»WrLbag» default_tab=»css» user=»tutorialmonsters»]See the Pen WrLbag by Alvaro (@tutorialmonsters) on CodePen.[/codepen_embed]En este ejemplo vemos como hacer que las etiquetas <a> no vengan subrayadas por defecto, y como cuando pasamos el ratón sobre ellas (la pseudo clase hover), si se aplicará la propiedad de subrayado.
También hemos hecho que las etiquetas <input> cuyo atributo type tenga el valor button , tengan el texto en color rojo.
Os dejo un enlace en el que podeis encontrar todas las pseudo clases disponibles en CSS, Mozilla Developer Network – Pseudo-classes y otro en el que encontrareis todas propiedades disponibles en CSS Mozilla Developer Network – CSS reference
No te ausutes por la cantidad de propiedades, reglas, y combinaciones y trucos que se pueden llegar a hacer con CSS. A la hora de la verdad, solo el 20% de las propiedades se utilizan el 90% del tiempo, y casi siempre son las mismas reglas las que utilizamos. Cuando necesitamos hacer algo poco habitual, podemos buscar ejemplos donde ya esté implementado. Si os queda alguna duda sobre los ejemplos que hemos hecho o tenéis alguna algún problema que no sabéis solucionar en vuestro CSS, no dudéis en escribirnos o dejar vuestros comentarios y os intentaremos ayudar.
