Este es un capítulo un poco farragoso sobre el uso de CSS. Conviene darle una primera lectura para saber lo que hay, ir practicándolo poco a poco y tenerlo como referencia conforme avances. Encontrarás ejemplos en capítulos sucesivos, ya que el uso de los selectores es esencial.
Índice de contenidos del artículo
Hasta ahora hemos visto selectores en los que podemos agregar una o varias etiquetas separadas por coma para que nuestros estilos afecten a varios elementos, aunque normalmente nos interesará justo lo contrario, ser más específicos y poder asignar estilos de manera más concreta a elementos específicos.
A los selectores que incluyen únicamente etiquetas HTML les llamaremos selector de tipo, porque seleccionarán a todos los elementos que coincidan con el nombre de un tipo de elemento. Un selector de tipo selecciona a todos los ejemplares del tipo de elemento especificado en el árbol del documento.
A un selector que incluye varios elementos separados por coma lo llamaremos selector múltiple.
Más información en la web de W3C:
Ya vimos los identificadores (id) en los enlaces HTML. Podemos asignar estilos a un id específico tal como hacíamos con los enlaces:
<head>
<style>#nombreid{propiedadcss:valor;}</style>
</head>
...
<body>
<h1 id="nombreid">Mi Título</h1>
</body>Es Importante recordar que los id sólo se pueden utilizar una vez dentro de una página.
Igualmente podemos asignar una clase a cualquier elemento HTML. A diferencia del id, las clases las podemos asignar a múltiples elementos, de este modo podemos agrupar estilos.
Una clase la declaramos con el atributo class:
<p class="nombreclase"> </p>Para referenciar una clase lo hacemos con un punto:
<style>.nombreclase{propiedadcss:valor;}</style>Sirve para seleccionar elementos que se encuentran dentro de otros:
div h1 {font-size:10px;}Esto estaría aplicando un tamaño de fuente de 10px a todos los h1 que se encuentren dentro de un div.
La regla definida mediante un selector descendente sólo se aplicará en el último elemento definido en el selector.
Los niveles de profundidad no afectan a este tipo de selector, lo que implica que un elemento no tiene que ser descendiente directo del otro, simplemente debe de estar en su interior.
El asterisco es el selector universal. Con él seleccionamos todos los elementos. No es común usarlo pero ahí esta.
También podemos combinar los selectores, por ejemplo:
div div.capa1, div p.texto {color:red;}El código anterior aplicará el color rojo a los elementos div con atributo class=”capa1″ definidos dentro de un div y a los p con atributo class=”texto” que estén encerrados en un div.
Similar al descendente salvo que en esta ocasión sólo se escoge al descendiente directo. Usamos > para indicarlo:
div > a {font-size:21px;}Aplicará el tamaño a los <a> hijos directos de un div.
Los selectores adyacentes nos permiten seleccionar elementos declarados a continuación de otros. Usamos + para emplearlo.
div + a {font-size:21px;}Con esto aplicamos el tamaño de fuente al <a> que se encuentre después de un div.
Como habrás observado, las propiedades CSS que aplicamos se transmiten de forma automática a todos los elementos descendientes. Esto es lo que llamamos herencia.
Por ejemplo, si aplicamos body {font-size:12px;}, se aplicaría este tamaño de letra a todos los elementos dentro de <body>.
Hemos de tener en cuenta que hay excepciones. Es decir, hay propiedades que no se propagan mediante la herencia. Las podemos ver en la especificación de cada propiedad en W3 Schools según el valor de Inheirit: Yes o No.
Por ejemplo, font-size sí lo es, background-color no.
También podemos encontrar excepciones a nivel navegador con las etiquetas a y h1-h6 a la hora de intentar cambiar colores y tamaños.
Por otro lado, la herencia se anula con cualquier regla más específica, de forma que si estilamos un elemento que está dentro de otro, surtirá efecto.
Podemos forzar la herencia asignando el valor inherit. Ejemplo: h2{font-size:inherit;}
<!DOCTYPE html>
<html>
<head>
<title>Email</title>
<meta charset="utf-8" />
<style>
body {color:blue;}
/*comenta o descomenta para experimentar*/
a{color:inherit;} /*esta regla forzaría la herencia de
la propiedad color de su elemento contenedor, en este
caso body, por tanto veríamos el enlace en azul.*/
p{color:black;}/*Esta anula la herencia de la prop.
color definida en body. Resultado, el párrafo 2 en
negro.*/
p{font-size: 25px;}/*Esta no anula nada*/
</style>
</head>
<body>
<div>párrafo 1</div>
<p>párrafo 2</p>
<a href="#">Enlace</a>
</body>
</html>Debido al efecto de propagación de la herencia, las excepciones y un sistema de prioridades que usan los navegadores, pueden surgir conflictos. En tal caso, contamos con el modificador !important, que impide que el valor de una propiedad pueda ser sobreescrito. Lo usaríamos del siguiente modo:
p {font-size: 12px !important;}Podemos seleccionar elementos en función del valor de un atributo:
[atributo=valor]p [class="texto"] {color:blue;}Con el código anterior aplicamos azul a los párrafo que tengan asignada la clase texto.
Con [atributo~=valor] seleccionamos los elementos en los que al menos uno de los valores asignados sea el que indicamos:
div [class~="clase1"] {font-size=20px;}El ejemplo anterior aplica el tamaño de fuente a los div que tengan asignada al menos la clase clase1.
[atributo|=valor] selecciona objetos declarados en el atributo cuyo valor sea una serie de palabras separadas por guiones. Se usa para los códigos de idioma y el atributo lang, cuyos valores son por ejemplo es-ES, es-AR, en-EN, etc.
[atributo$=valor] selecciona elementos cuyo valor finalice en el valor dado.
a [href$=".com"] {color:green;}Aplica color verde a los enlaces cuyas URL de destino terminen en .com
[atributo^=valor] selecciona elementos cuyo valor comience por el valor dado.
a [href^="www"] {color:green;}[atributo*=valor] selecciona elementos cuyo valor contenga el valor dado.
p [class*="noticia"] {color:green;}
Las pseudo clases nos periten estilar eventos que pueden ocurrir en los elementos, como en el caso de cuando hemos visitado un enlace con a:visited.
Esto podemos aplicarlo también sobre otros elementos, como un div:
div:hover {background-color:blue;}Con hover especificamos los estilos a aplicar cuando pasamos el ratón por encima de un elemento, con en un div en el ejemplo anterior.
También contamos con la pseudo clase first-child, que permite aplicar estilos sobre el primer hijo de un elemento:
p:first-child {color: blue;}Con el código anterior seleccionamos a cualquier <p> que sea hijo de cualquier otro elemento.
p i:first-child {color: blue;}Con el código anterior seleccionamos al primer <i> dentro de cualquier <p>.
p:first-child i {color: blue;}Con el código anterior seleccionamos a cualquier <i> dentro de cualquier <p> que sea hijo de cualquier otro elemento.
También contamos con :last-child para seleccionar al último hijo y :nth-child (x) para seleccionar al enésimo hijo de un elemento. La x que introducimos como argumento puede ser un número, pueden ser los elementos pares o impares (even o odd) o los que sea resultado de una progresión que comience por 0, ejemplo: n+3.
Aquí podemos ver recetas:
css-tricks.com/examples/nth-child-tester
También podemos seleccionar al primer, último o enésimo elemento del mismo tipo con :first-of-type, :last-of-type o :nth-of-type (x).
li:first-of-type, li:last-of-type {color:gold;}:only-child seleccionamos elementos sin hermanos.
:only-of-type elementos de un tipo sin hermanos.
:empty elementos vacíos.
:not (selector) selecciona a todos menos al elemento indicado en el argumento.
:not(p) {background: #ff0000;}El código anterior aplicará el fondo a todo menos a los <p>
También existen los pseudo elementos. Estos se expresan con dos puntos dobles ::
Tenemos los siguientes:
p::afterInserta contenido después de cualquier p
p::beforeInserta contenido antes de cualquier p
Algunos ejemplos interesantes con esto (eng):
A Whole Bunch of Amazing Stuff Pseudo Elements Can Do
p::first-leterSelecciona la primera letra de cada p.
p::first-lineSelecciona la primera línea de cada p.
p::selectionSelecciona la selección del usuario. Con esto podemos fácilmente estilar de forma elegante la selección del usuario en nuestro sitio web con los colores corporativos. Prueba a seleccionar texto en esta página.
