DEV Community

Ulises A.F.C
Ulises A.F.C

Posted on

Tipos de Selectores en CSS

#webdev #html #css #tutorial

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
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

Selectores de clase

Los selectores de clase se componen por el símbolo del punto . seguido de un nombre.

.texto {
  color: darkslateblue;
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode
  • 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;
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Para asignar estilos con selector de hijo directo, se haria de la siguiente forma:

section > h2, p {
  color: cadetblue;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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)

Read next

youxufkhan profile image

Getting Started with TypeScript: Types

youxufkhan -

fabon profile image

Publish pure ESM npm package written in TypeScript to JSR

fabon -

serhatbek profile image

Vanilla JavaScript - Accordion

serhatbek -

const_variable profile image

Is null a dataType in Javascript?

Maulik Chaudhary -