En este post voy a definir las reglas de los estilos en CSS, además de indicar los tipos de selectores básicos y algunos de los avanzados.
Primero vamos a mostrar un pequeño código en CSS y después lo analizaremos:
p {
margin: 5px;
font-family: Arial;
color: red;
}
En nuestro caso, la etiqueta <p> representa el selector, es decir, estamos apuntando directamente a todas las etiquetas <p> del documento que esta vinculado a nuestra hoja de estilos, el HTML que tiene vinculo a través de <link..> o en su caso, sea estilo en línea, por lo que sólo afectará a dicha etiqueta <p> en concreto, o también los estilos dentro de la etiqueta <head>.
A partir de ahora siempre nos referiremos a los estilos externos, que son las mejores prácticas posibles.
Después de indicar a qué queremos aplicar nuestros estilos, debemos encerrar entre llaves {..} tantas reglas como queramos.
Cada una de las reglas tiene dos componentes o dos partes separadas por dos puntos (:). Primero la propiedad CSS, en el ejemplo tenemos tres propiedades; margin (margen exterior), font-family (familia de la fuente), y color (color del texto). Y la segunda parte de la regla es el valor de la propiedad que precede, en nuestro ejemplo; 5px (para la propiedad margin), Arial (para la familia de fuente) y red (para el color del texto). Cada una de las reglas debe cerrarse con el signo punto y coma (;) .
Aquí te dejo la estructura de la regla:
Tabla de contenidos
Selector de elementos
No hace falta decir que podemos apuntar a cualquier tipo de etiqueta, por ejemplo, <body>, <div>, <input>, <strong>, <em>, <header>... Este es el tipo de selector más sencillo y se llama selector de elementos.
Si queremos apuntar a varias etiquetas a la vez lo haremos mediante comas con los selectores de grupo de la siguiente manera:
p, div, header {
margin: 5px;
font-family: arial;
color: red;
}
De esta forma, aplicamos el mismo estilo a tres elementos diferentes.
Selector de class
Otro tipo de selector es el selector de clase. Su implementación sería poniendo un punto delante del nombre de la clase:
.ejemplo {
margin: 5px;
font-family: arial;
color: red;
}
El selector de clase apunta directamente a los elementos HTML a los cuales les hemos especificado en su atributo class ='ejemplo'. Aquí puede haber cualquier tipo de elemento HTML.
Selector de id
Después tenemos el selector de id. Este selector es muy especifico y aunque lo podemos utilizar siempre que queramos, se suele utilizar para apuntar elementos con JavaScript. La implementación sería poniendo delante del nombre del id el símbolo hashtag o almohadilla (#):
#ejemplo {
margin: 5px;
font-family: arial;
color: red;
}
Selector universal
Antes de continuar con el resto de los selectores, hay que hacer referencia al selector universal (*). Este selector selecciona todos los elementos. Aquí tenéis un ejemplo:
* {
margin: 0;padding: 0;
}
En este caso, todos, absolutamente todos los elementos tendrán un margen interior y exterior de cero píxeles.
Selector de descendientes
El siguiente es el selector de descendientes, con él podemos definir reglas más precisas o específicas:
div #ejemplo {
margin: 5px;
font-family: arial;
color: red;
}
En este caso sólo aplicaremos los estilos CSS al elemento div con el identificador ejemplo. Si hay algún elemento div más lo ignorará.
Otro ejemplo:
div p {
margin: 5px;
font-family: arial;
color: red;
}
En este caso queremos aplicar los estilos a todos los elementos <p> que estén dentro de un elemento <div>. Consiste en descender dentro de los elementos, de ahí su nombre. Si hubiera dentro de un elemento <p>, por ejemplo un elemento <strong> (etiqueta de negrita), lo implementaríamos así:
div p strong {
margin: 5px;
font-family: Arial;
color: red;
}
Y se leería, aplica estos estilos al elemento <strong> que hay dentro de los <p> que hay dentro de los <div>. El código HTML sería el siguiete:
...
<div>
<p>palabra <strong>resaltada</strong></p>
</div>
...
Ahora tú dirás, podríamos poner directamente el selector strong {...} y sería más rápido. Sí, pero se aplicarían los estilos en todos los elementos <strong> de la página. Espero quede claro que de la forma indicada, la palabra «resaltada» sería la única a la que se aplicarían los estilos CSS.
Selector de hijos directos
El siguiente tipo de selector es el selector de hijos directos. Este tipo de selectores solamente apuntan hacía los elementos hijos directos del elemento padre. Su sintaxis es está div > em. Pongo un ejemplo:
<div>
<em>Hola</em>
<p>Esto es un parágrafo con
<em>cursiva</em>
</p>
</div>
Con el selector div > em seleccionamos sólo el elemento <em> que hay inmediatamente dentro de <div>, pero, y aprovechando el ejemplo, con el selector de descendientes, apuntaríamos a los dos elementos <em> .
Selector de hermanos adjacentes
El siguiente selector es el selector de hermanos adyacentes. Su sintaxis es h1 + p. El siguiente ejemplo lo ilustra:
... <header> <h1>Título</h1> <p>Aquí indicamos la introducción</p> </header> <section> <p>Primera frase</p> <p>Segunda frase</p> <p>Tercera frase</p> </section> ...
Utilizando el selector h1 + p seleccionamos a todos los elementos <p> que están inmediatamente después de un elemento <h1>, por lo que sólo cambiaremos la frase «Aquí indicamos la introducción«, porque es el único que está precedido por un elemento <h1>. Pero si colocamos otro elemento entre el <h1> y el <p>, éste no se modificará.
Selector de hermanos generales
Hay otro tipo de selector que se llama selector de hermanos generales, el cual tiene la sintaxis h1 ~ p, que afecta a todos los elementos que se ubican a continuación de otro elemento. Con este selector, en el ejemplo anterior, se seleccionaran todos los elementos <p> que están precedidos por un elemento <h1>, Si el selector fuera p ~ p se seleccionaría el texto Segunda frase y Tercera frase, Primera frase no porque no está precedido de un elemento <p>.
La regla es que apunta a dos selectores y selecciona el segundo elemento sólo si está precedido por el primero y ambos comparten un padre común.
Selector de atributos
Este selector nos permite seleccionar elementos en función de los atributos que contienen dichos elementos. Su sintaxis es la siguiente, img [src='inicio.gif'] { ... }. La siguiente regla seleccionara las imágenes que tengan como atributo src la imagen inicio.gif. Recordemos que el elemento <img> inserta imágenes en nuestra página y su atributo src indica la ruta de la imagen a insertar en el documento.
Otros atributos
Los selectores arriba indicados cubren una amplia variedad de situaciones, pero, a veces son insuficientes para localizar el elemento exacto que queremos modificar. Para esas situaciones, CSS nos permite hacer referencia a un elemento por medio de cualquier atributo que necesitemos.
a [name] {
padding: 20px;
}
Otra de las opciones es incluir el valor del atributo.
a [name="enlace"] {
padding: 20px;
}
CSS nos da la posibilidad de poder combinar el carácter = con otros para hacer una selección mucho más específica. En la siguiente tabla figuran los más utilizados:
| Carácter | Significado | Ejemplos |
|---|---|---|
a[name]~="mi" | Atributo "name" incluye «mi» | "mi enlace"... |
a[name]^="mi" | Atributo "name" comienza «mi» | "miEnlace"... |
a[name]$="mi" | Atributo "name" termina «mi» | "holami"... |
a[name]*="mi" | Atributo "name" contiene «mi» | "esmienlace"... |
Deja una respuesta