Vamos a poner en práctica los diferentes tipos de selectores disponibles en CSS
El selector universal se define con el asterisco (*) y se aplica a todos los elementos del documento, con independencia de qué etiqueta son, y de qué clases o id puedan tener.
Al ser tan general solo lo podremos aplicar para formatos muy comunes, porque cualquier otro atributo definido en él será modificado después por los selectores más específicos.
En concreto, lo solemos usar para resetear los márgenes y paddings que aplica la hoja de estilos del navegador a los documentos.
En este documento tenemos diferentes niveles de encabezado, párrafos, y ahora vamos a crear una lista de tipo ul. Vemos que el navegador aplica un formato predeterminado a esos elementos:
Al aplicar esta regla hacemos que todos los elementos aparezcan sin margen ni relleno, y definiendo su anchura desde la posición del borde.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
Este tipo de selectores definen elementos de formato también muy generales que queremos mostrar en todo el documento, aunque luego vayan a ser sobreescritos puntualmente por otros selectores.
En este caso trabajamos con la etiqueta body definiendo sobre ella los aspectos tipográficos generales del documento.
body {
font-family: Arial, Helvetica, sans-serif;
color: slategray;
font-size: 20px;
line-height: 1.21;
background-color: whitesmoke;
}
Aquí definimos el comportamiento visual para cada etiqueta, al margen de las modificaciones específicas por clase que vayamos a añadir después.
Como sigue siendo un selector muy general solamente aplicaremos aquí unos pocos atributos comunes a todas ellas.
Para redefinir el formato de las etiquetas empleadas hasta ahora en el documento podemos hacer esto:
h1 {
margin-bottom: 40px;
text-align: center;
}
p {
margin: 10px 10%;
}
h2 {
margin: 20px 5%;
border-bottom: 1px solid;
}
h3 {
margin: 10px 60% 10px 10%;
border-bottom: 1px solid;
border-top: 1px solid;
padding-left: 10px;
}
li {
margin: 20px 30%;
}
Usamos la siguiente expresión emmet ul>(li>a{Enlace de muestra $})*4 para generar este código:
Para cambiar el formato de todos los enlaces, también cuando pasamos el ratón sobre ellos haremos:
a {
color: tomato;
text-decoration: none;
}
a:hover {
background-color: darkgray;
font-style: italic;
}
El uso de la coma en la definición de los selectores permite que todos ellos compartan el mismo formato.
Si queremos aplicar un formato común a las etiquetas h1, h2 y h3, aparte del que ya hemos definido de manera particular para cada una de ellas, lo podemos simplificar usando comas en un nuevo selector, en lugar de repetir las mismas propiedades en cada uno de los selectores propios de cada etiqueta:
h1, h2, h3 {
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
color: darkslategray;
}
Los selectores de clase permiten un trabajo más específico sobre los elementos del documento, porque se pueden aplicar a etiquetas concretas, en lugar de modificar a la vez todas las apariciones de una misma etiqueta. También permiten ser aplicados a diferentes etiquetas al mismo tiempo.
Los selectores de id están pensados para modificar un solo elemento del documento, ya que un html bien formado impide usar más de una vez el mismo id en él. Pero en caso de que tuviésemos más de una aparción de ese id en el documento, CSS lo trataría como si fuese una clase y aplicaría el formato definido en él a todos ellos.
Vamos a generar 6 párrafos con contenido aleatorio usando una esta expresión:
(p>lorem^p.resaltado>lorem)*3, y al último párrafo le añadimos un id="noticia"
Añadimos el siguiente formato a la clase resaltado:
.resaltado {
color: darkslateblue;
font-family: 'Courier New', Courier, monospace;
}
Al último párrafo de muestra le añadimos un atributo id que usamos para definir este formato:
#noticia {
color: darkred;
}
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt ex, temporibus, velit aut a odit autem suscipit nemo unde esse voluptas debitis numquam tenetur accusantium architecto amet nobis at animi.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi perspiciatis nulla quas. Repellendus quasi repudiandae suscipit autem nesciunt porro assumenda vel earum explicabo aperiam! Eaque sapiente sed quam voluptate fugiat.
Id animi ex amet alias error, eveniet voluptates, dolor, commodi aspernatur nesciunt eius voluptate fugiat omnis beatae veritatis adipisci blanditiis rem veniam rerum optio odit necessitatibus! Sequi at recusandae temporibus!
Culpa ex maxime ea, pariatur fugiat quaerat omnis dolorem accusantium cumque est laudantium excepturi earum totam illum doloribus, blanditiis consequuntur laborum similique nesciunt? Fuga nulla porro rerum alias facilis aliquid.
Nostrum ab hic architecto cumque magni, eligendi fugit, voluptatum aut eaque neque odio commodi obcaecati nobis inventore ullam, veritatis error cum! Illum at architecto provident corporis dolores eos quas dolor!
Totam, laudantium beatae? Fugit iste, reprehenderit quas voluptates vero amet ullam laudantium doloremque repudiandae possimus officia quo repellendus sint ipsa earum? Doloribus fugit aspernatur voluptas libero corrupti dignissimos eos nostrum.
Podemos construir selectores CSS basados en la estructura dada de el documento, haciendo que determinadas reglas solo apliquen a sus elementos de destino cuando estos se encuentran en una determinada posición en el árbol del documento, también llamado DOM.
Por ejemplo, en el caso anterior, queremos englobar los 6 párrafos dentro de un contenedor para separarlos visualmente del resto de párrafos del documento, y al mismo tiempo queremos que esos 6 párrafos tengan un formato diferente al de los demás párrafos.
La primera parte lo conseguimos anidando los párrafos dentro de un elemento div, por ejemplo, al que le podemos añadir una clase si queremos manipular su formato. En nuestro caso será el elemento div.grupo
.grupo {
border: 1px solid;
margin: 30px 10%;
letter-spacing: 2px;
}
Para acceder al formato de estos elementos únicamente usamos una combinación desde el contenedor inmediato, el div.grupo, hasta los párrafos. En este tipo de selectores el formato sólo aplica al último elemento de la cadena, el resto de selectores previos sólo sirven para filtrar a qué elementos accedemos.
.grupo p {
margin: 20px 5%;
background-color: lightgrey;
border-left: 1px solid;
}
Otra forma de definir especificidad en los selectores la conseguimos mediante la combinación de etiquetas y clases. Por ejemplo, en nuestro caso vamos a generar ahora 3 elementos h3 a los que le añadimos la clase resaltado. Esos elementos van a recibir formato a nivel más general por el selector de etiqueta (h3) y a nivel más específico por el selector de clase (.resaltado).
Pero si queremos acceder a ellos de manera específica podemos combinar los dos selectores en uno nuevo que nos evite el tener que crear una clase propia para este caso
Vamos a insertar 4 elementos h3 con la clase resaltado dentro de un div.grupo, y posteriormente modificamos los h3 con el selector h3.resaltado:
h3.resaltado {
margin: 20px 5%;
background-color: lightgrey;
}
Este es el resultado:
En cambio, esta estructura h3>span.resaltado, no se vería afectada por la regla anterior, porque la clase resaltado no está aplicada al elemento h3, sino al contenido span anidado dentro del h3. Para poder acceder a es span usaríamos la expresión h3 .resaltado. El espacio entre los dos elementos significa anidación.
Por lo tanto, este código <h3>En este elemento <span class="resaltado"> solo accedemos a la clase anidada dentro del h3</span>, pero no a todo el h3 </h3>, devuelve este elemento en el documento:
Que es modificado por el siguiente selector:
h3 .resaltado {
font-family: 'Courier New', Courier, monospace;
color: orange;
}
Recordamos que al usar el espacio entre dos elementos en un selector estamos indicando que el segundo está contenido en cualquier nivel dentro del primero, y le afectará el selector incluso cuando entre medias de los dos tengamos más elementos en el DOM
Esta estructura div.grupo>div>p también se verá afectada por la regla anterior (.grupo p):
Este titular también es afectado por la regla anterior porque usamos el espacio como indicador de anidación.
Para evitar esto y conseguir que el selector solo afecte a los elementos p directamente contenidos en el div.grupo tendríamos que usar el carácter ">" en el selector, quedando de esta forma .grupo > p
.grupo > p {
border-left: none;
padding-left: 5px;
}
Se puede definir un selector tan complejo como queramos en niveles de anidación. Mientras que en el DOM exista esa estructura el selector afectará al elemento en cuestión. Pero no es recomendable porque acaba haciendo el código menos legible y reutilizable.
En el caso anterior podríamos hacer algo así: .grupo div p .resaltado y accedería correctamente a ese elemento, pero de manera mucho más confusa.
Podemos usar el operador "+" para indicar en un selector que un elemento aparece junto a otro en DOM, y que ese último elemento reciba el formato indicado.
Podemos construir un selector que afecte únicamente al primer párrafo que aparezca después de una etiqueta h2.
h2 + p {
font-weight: bold;
font-size: 22px;
color: darkslategray;
}
Otro ejemplo es cuando queremos seleccionar todos los elementos de un grupo menos el primero. En este caso todos los segundos y sucesivos párrafos de un grupo
p + p {
margin-top: 20px;
}