Los selectores en CSS son aquellos donde asignamos estilos a etiquetas del documento HTML.
Este tutorial se tratara de como podemos usar los selectores en CSS, veremos la mayor parte código de CSS.
Empecemos por clasificar los tipos de selectores que hay en CSS:
- Selector universal
- Selector de etiqueta
- Selector de identificador (ID)
- Selector de clase
- Selector de atributo
- Selectores agrupados
- Selectores descendientes
- Selector de hermano
- Selector de hijo directo
Veremos a continuación cada uno de ellos, empecemos...
Selector universal
El selector universal en CSS se compone por el símbolo de un asterisco *, este selector hace referencia a todo el documento visible de una pagina web, por lo tanto, al definir estilos con este selector, este se aplica a todas las etiquetas del body.
* {
background-color: darkslateblue;
font-family: Arial, Helvetica, sans-serif
}
Este selector es mas utilizado para definir propiedades como box-sizing: border-box, fuente de letra o un color de fondo.
Selector de etiqueta
Los selectores de etiqueta son aquellos que se componen por el nombre de etiquetas HTML, como por ejemplo: body, p, header, article, section, footer, entre otros.
Para asignar estilos mediante selector de etiquetas, basta con colocar el nombre de la etiqueta HTML:
h1 {
color: lightcyan;
}
h2 {
color: lemonchiffon;
}
p {
color: lawngreen;
}
b {
color: aliceblue;
}
Selector de identificador (ID)
Los selectores de ID (identificador) se compone por el símbolo de # seguido de un nombre identificador.
#cabecera {
background-color: lightskyblue;
padding: 5px;
}
#contenido {
background-color: lightblue;
padding: 5px;
}
#titulo {
color: darkred;
}
Selectores de clase
Los selectores de clase se componen por el símbolo del punto . seguido de un nombre.
.texto {
color: darkslateblue;
}
Selectores de atributo
Los selectores de atributo se asignan por medio de corchetes [], dentro de ellos va el atributo al cual se le asignaría estilos.
Un ejemplo de como poder usar este tipo de selector, supongamos que en nuestra pagina tenemos enlaces hacia diferentes redes sociales, pero que dependiendo la URL podamos asignar un color al enlace, seria de la siguiente manera:
Estos serian los enlaces:
<a href="https://www.twitter.com">Twitter</a>
<a href="https://www.facebook.com">Facebook</a>
<a href="https://www.instagram.com">Intagram</a>
En CSS seria de la siguiente forma:
[href="https://www.twitter.com"] {
background-color: dodgerblue;
padding: 6px;
color: #222;
}
[href="https://www.facebook.com"] {
background-color: navy;
padding: 6px;
color: #ccc;
}
[href="https://www.instagram.com"] {
background-color: mediumvioletred;
padding: 6px;
color: pink;
}
Asi se definen los selectores de atributo. Una ventaja de usar este tipo de selector en casos muy especiales, es que podemos definir un patron. Por ejemplo, si queremos asignar estilos a un atributo que empieze por x palabra, o que termina en x palabra, o que contenga x palabra.
Veamos un ejemplo:
/*
lo que empiece con la palabra "curso",
poner en mayuscula y pintar de color verde
*/
[href^="curso"] {
text-transform: uppercase;
color: greenyellow;
}
/*
lo que termine con la palabra "css3"
pintarlos de color rosa
*/
[href$="css3"] {
color: palevioletred;
}
/*
todo lo que lleva la palabra 'maquetar'
poner en minuscula y pintarlo de blanco
*/
[href*="maquetar"] {
color: #fff;
text-transform: lowercase;
}
- Con el símbolo de
^definimos el patrón para la búsqueda de "palabras que empiecen con". - Con el símbolo de
$definimos el patrón para la búsqueda de "palabras que terminen con". - Con el símbolo de
*definimos el patrón para la búsqueda de "palabras que incluyan la palabra de".
Selectores agrupados
Los selectores agrupados son aquellos elementos que comparten mismos estilos que otros elementos, ya sea, selectores de etiqueta, selectores de ID, selectores de clase, entre otros. El objetivo de agrupar selectores es no repetir codigo. Don't repeat yourself.
article, #section {
background-color: darkturquoise;
}
.titulo_uno, .titulo_dos, #titulo_tres {
color: darkred;
}
Estos van separados por comas ,. como el ejemplo anterior.
Selectores descendientes
Los selectores descendientes no son mas que otro tipo de selector que se encuentre dentro de otro, y así sucesivamente. Un ejemplo seria:
En nuestro documento HTML tengamos lo siguiente:
<article class="parrafo">
<h2 class="titulo">Concepto</h2>
<p class="texto">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Quaerat veritatis sint eius quasi, beatae vitae culpa
libero distinctio minima.
</p>
</article>
El selector descendiente de article son la etiqueta h2 y p.
En CSS seria de la siguiente forma:
.parrafo .titulo {
color: #558a05;
}
.parrafo .texto {
color: #000111;
}
Así se asigna un selector descendiente, estas nos van separadas por comas , a diferencia de los selectores agrupados.
Aunque esta forma de usarlo no es tan usado, ya que para asignar estilos a un elemento de nuestro body en el html basta con poner el tipo de selector directamente. A diferencia de los tipos de selectores que nos restan por ver.
Selectores de hermano
Los selectores de hermano hacen referencia al hermano siguiente de un elemento HTML. Para acceder al hermano siguiente mas cercano, se utiliza el símbolo de +. También si queremos acceder a todos los hermanos siguientes se utiliza el símbolo de ~.
Un ejemplo, veamos el siguiente código HTML:
<main>
<article>
<h2>Titulo del parrafo</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Quaerat veritatis sint eius quasi, beatae vitae culpa
libero distinctio minima.
</p>
<p id="cita">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Quaerat veritatis sint eius quasi, beatae vitae culpa
libero distinctio minima.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Quaerat veritatis sint eius quasi, beatae vitae culpa
libero distinctio minima.
</p>
</article>
</main>
Para poder asignar estilos a un hermano siguiente de un elemento se hace de la siguiente forma:
h2 + p {
color: purple;
}
#cita + p {
color: cyan;
}
Como podemos observar en el ejemplo, la etiqueta h2 su hermano siguiente es un párrafo p, a ese párrafo se estaría aplicando el color: purple. También en el otro ejemplo, #cita tiene un hermano siguiente que es otro párrafo p, a ese párrafo se estaría aplicando el color: cyan.
Para poder asignar estilos a un hermano siguiente se debe anteponer el elemento anterior, ósea, su hermano anterior. Deben estar a la par ambos elementos para poder usar selectores de hermano, de lo contrario no funcionaria.
En caso de asignar estilos a todos los hermanos siguientes funciona de la misma manera, deben estar a la par del siguiente elemento para que funcione.
h2 ~ p {
color: purple;
}
Así todos los hermanos p de h2 cambiarían de color. A excepción de si se encontrase una sentencia similar a esta:
#cita + p {
color: cyan;
}
El hermano de #cita ese no cambiaria de color.
Selectores de hijo directo
Un selector de hijo directo se refiere a todos los elementos hijos de un elemento en especifico. Para hacer referencia a los hijos directos de un elemento se usa el símbolo de >.
Veamos el siguiente codigo HTML:
<section>
<h2>Titulo del parrafo</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Quaerat veritatis sint eius quasi, beatae vitae culpa
libero distinctio minima.
</p>
<h2>Titulo del parrafo</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Quaerat veritatis sint eius quasi, beatae vitae culpa
libero distinctio minima.
</p>
<h2>Titulo del parrafo</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Quaerat veritatis sint eius quasi, beatae vitae culpa
libero distinctio minima.
</p>
</section>
Para asignar estilos con selector de hijo directo, se haria de la siguiente forma:
section > h2, p {
color: cadetblue;
}
Si queremos dar estilos a mas de un elemento que conformen hijos directos de un elemento, despues del simbolo >,los elementos van separados por comas ,.
Tambien, en un caso particular a este, podemos jugar con selector de hijo directo y selector de hermano:
section > h2 + p {
color: cadetblue;
}
En este caso, section tiene como hijo directo "muchos" h2, pero esos h2 tienen un hermano p, a ese p se estarían aplicando los estilos.
En conclusión
Los selectores en CSS no son muy complejos, pero es necesario saber como es su comportamiento. Les invito a que puedan practicar con ejemplos muy sencillos y que no puedan olvidar estos temas, por muy sencillos que parezcan se pueden volver complejos si no practicamos de vez en cuando.
Puedes practicar en codi.link es un editor de código en linea muy ligero para poder hacer practicas.
Gracias por terminar hasta aquí.
Saludos <3
Top comments (0)