03-Selectores en css

Selector, como su proprio nombre indica seleciona un elemento en HTML en lo que queremos darle estilo

Se pueden dividir los selectores en cinco categorias

• Selectores simples (seleccionar elementos basados ​​en nombre, id, clase)
• Selectores combinadores (seleccione elementos basados ​​en una relación específica entre ellos)
• Selectores de pseudoclase (seleccionar elementos en función de un determinado estado)
• Selectores de pseudo-elementos (seleccionar y estilizar una parte de un elemento)
• Selectores de atributos (seleccionar elementos basados ​​en un atributo o valor de atributo)

---

...

El selector de elementos

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

ejemplo

Aquí, todos los elementos <p> en la página serán alineado al centro, con un color de texto verde:

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

salida

Hola soy el primer parrafo

Hola soy un parrafo alinado al centro y color verde

Hola soy el segundo parrafo, soy el del medio

---

El selector de ID

El selector de id usa 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 es solía hacerlo seleccione 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;
        }
    

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

---

El selector de clases

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 carácter nombre de la clase.

Ejemplo

En este ejemplo, todos los elementos HTML con class="center" estarán en rojo 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

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

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

ejemplo

En este ejemplo, el elemento <p> tendrá un estilo de acuerdo con class="center" y a class="grande":

        <p class="center grande">Este parrafo tiene dos clases</p> 
    

Nota ¡Un nombre de una clase no puede comenzar con un número!

---

El selector universal

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

ejemplo

El seguiente ejemplo todos los elementos de la pagina seran afectados

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

---

El selector de agrupación

El selector de agrupación selecciona todos los elementos HTML con el mismo estilo definiciones

Cuando ponermos h1 o p seguido de los estilos, todos los elementos con ese nombre seran afectados

ejemplo

El ejemplo demonstra que todos los h1, h2 y p van ser afectados por los estilos

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

Soy un enbabezado h1 alignado al centro y color rojo

Soy un enbabezado h2 alignado al centro y color rojo

parrafo alignado al centro de color rojo

---

Si el estilo en los diversos selectores es lo mismo, entonces para ahorrar lineas de codigo lo mejor es agrupar los selectores

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

---

Ir al indice