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

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

<div class="rojo">Rojo1</div> 
        <div class="rojo">Rojo2</div> 
        <div class="negro">Negro</div>

.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

<strong>HTML</strong> 
        <strong>CSS</strong>

strong {
           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

<strong>Los animales</strong> 
        <p>Son seres vivos que habitan en la tierra</p>

strong , 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;
        }