Cómo seleccionar elementos de una página web con CSS

Publicado
Actualizado
Engagements 0 Comentario

A la hora de darle estilo a los elementos de una página web en #HTML, es bastante común utilizar una hoja de estilos CSS y seleccionar los elementos de dicha página a través de selectores. En la actualidad, existen muchos selectores; sin embargo, en este pequeño tutorial, mostraremos algunas de las formas más comunes de seleccionar contenido desde CSS.

Selectores de id’s

Permiten seleccionar a los elementos a través de su "id". Para ello hay que colocar el signo de numeral "#" seguido del nombre del id.

Ejemplo

<p id="primero">1er párrafo</p> 
        <p id="segundo">2do párrafo</p>
        
#primero {
           color: blue;
        }

Selectores de clases

Permiten identificar a varios elementos que posean la misma clase. Para ello se debe colocar un "." seguido del nombre de la clase.

Ejemplo

<h3 class="rojo">Rojo1</h3> 
        <h3 class="rojo">Rojo2</h3> 
        <h3>Negro</h3>
        
.rojo {
           color: red;
        }

Selectores de tipos de elementos HTML

Permiten identificar elementos propios de HTML. Para ello simplemente hay que colocar el nombre de la etiqueta.

Ejemplo

<h1>HTML</h1> 
        <h2>CSS</h2>
h1 {
           font-style: oblique;
           color: purple;
        }

Selector Global

Permite seleccionar todos los elementos que estén dentro del documento HTML. Para ello hay que utilizar el símbolo *.

Ejemplo

<p>texto</p> 
        <div>div 1</div> 
        <div>div 2</div>
* {
           color: green;
           text-transform: uppercase;
        }

Selectores en grupo

Permiten agrupar varios selectores para aplicarles el mismo estilo. Para ello se deben colocar todos los selectores separándolos con comas.

Ejemplo

<h2>Los animales</h2> 
        <p>Son seres vivos que habitan en la tierra</p>
h2 , p {
           color: C246F0;
        }

Selectores de Descendientes o Niveles

Permiten especificar elementos que se encuentran dentro de otros. Para ello se deben ir colocando en orden todos los elementos padres (separándolos por un espacio), hasta llegar a los descendientes  o niveles deseados.

Ejemplo

<div>
            <p>texto 1</p> 
            <p>texto 2</p> 
        </div>
div p {
               background-color: yellow;
        }

Selectores con Pseudo-clases

Las pseudo-clases en CSS son un conjunto de palabras clave que se añaden a los selectores, y que permiten especificar un estado especial de un determinado elemento. Para utilizarlas solo hay que añadir el selector seguido de la palabra clave. Algunas de estas palabras clave son: :link - Hace referencia a los enlaces que aún no han sido visitados. :hover - Se aplica al pasar el cursor por encima del elemento seleccionado. :focus - Aplica el estilo al elemento que tiene el foco.

Ejemplo

<a href="index.html">Ir a inicio</a>
a:hover {
           color: red;
           text-decoration: none;
        }

 

Comentarios