Selectores CSS

Los selectores CSS se utilizan para "encontrar" (o seleccionar) los elementos HTML que desea diseñar.

Podemos dividir los selectores CSS en cinco categorías:
  • Selectores simples (seleccione elementos basados ​​en nombre, id, clase)
  • Selectores de combinador (seleccione elementos basados ​​en una relación específica entre ellos)
  • Selectores de pseudo-clase (seleccione elementos basados ​​en un estado determinado)
  • Selectores de pseudoelementos (seleccionar y diseñar una parte de un elemento)
  • Selectores de atributos (seleccione elementos basados ​​en un atributo o valor de atributo)

Esta página explicará los selectores CSS más básicos.

El selector de elementos CSS

El selector de elementos selecciona elementos HTML en función del nombre del elemento.

Ejemplo

Aquí, todos los elementos <p> de la página estarán alineados al centro, con un color de texto rojo:

p {
  text-align: center;
  color: red;
}

El selector de id. De CSS

El selector de id utiliza el atributo id de un elemento HTML para seleccionar un elemento específico.

¡La identificación de un elemento es única dentro de una página, por lo que el selector de identificación se usa para seleccionar un elemento único!

Para seleccionar un elemento con una identificación específica, escriba un carácter hash (#), seguido de la identificación del elemento.

Ejemplo

La siguiente regla CSS se aplicará al elemento HTML con id = "para1":

#para1 {
  text-align: center;
  color: red;
}


  1. Nota: ¡ Un nombre de identificación no puede comenzar con un número!


El selector de clase CSS

El selector de clase selecciona elementos HTML con un atributo de clase específico.

Para seleccionar elementos con una clase específica, escriba un carácter de punto (.), Seguido del nombre de la clase.

Ejemplo

En este ejemplo, todos los elementos HTML con class = "center" estarán rojos y alineados al centro:

.center {
  text-align: center;
  color: red;
}

También puede especificar que solo los elementos HTML específicos se vean afectados por una clase.

Ejemplo

En este ejemplo, solo los elementos <p> con class = "center" estarán alineados al centro:

p.center {
  text-align: center;
  color: red;
}

Los elementos HTML también pueden referirse a más de una clase.

Ejemplo

En este ejemplo, el elemento <p> se diseñará de acuerdo con class = "center" y class = "large":

<p class="center large">This paragraph refers to two classes.</p>


  1. Nota: ¡ Un nombre de clase no puede comenzar con un número!


El selector universal de CSS

El selector universal (*) selecciona todos los elementos HTML en la página.

Ejemplo

La siguiente regla CSS afectará a cada elemento HTML en la página:

* {
  text-align: center;
  color: blue;
}

El selector de agrupación CSS

El selector de agrupación selecciona todos los elementos HTML con las mismas definiciones de estilo.

Mire el siguiente código CSS (los elementos h1, h2 y p tienen las mismas definiciones de estilo):

h1 {
  text-align: center;
  color: red;
}
h2 {
  text-align: center;
  color: red;
}
p {
  text-align: center;
  color: red;
}
Será mejor agrupar los selectores para minimizar el código.

Para agrupar selectores, separe cada selector con una coma.

Ejemplo

En este ejemplo, hemos agrupado los selectores del código anterior:

h1, h2, p {
  text-align: center;
  color: red;
}

Todos los selectores simples de CSS

Selector Example Example description
.class .intro Selects all elements with class="intro"
#id #firstname Selects the element with id="firstname"
* * Selects all elements
element p Selects all <p> elements
element,element,.. div, p Selects all <div> elements and all <p> elements

Recuerda suscribirte:

Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE
¿Te ha resultado útil este artículo, recomiendanos?
Si



Share:

Luis Chávez

Soy el fundador del sitio web Ayudadeblogger.com - Considerado un Pro Blogger profesional, Consultor SEO y desarrollador Web adicto, ejecuto una serie de sitios web desde mi Oficina Quito-Ecuador.

Related post

Comentarios

Disqus

Disqus comments:


Facebook

Facebook comments:

No hay comentarios:

Publicar un comentario