Selectores

Los selectores sirven para identificar los elementos a los que se aplicará el formato definido en la lista de declaraciones

Hay distintos tipos de selectores que pueden ser utilizados para definir las reglas CSS

Vamos a describirlos de los más generales a los más específicos (desde el punto de vista de menor a mayor prioridad)

Selector Universal

Se define con * y se aplica a todos los elementos de la página:

* {
    margin: 0;
    font-family: Verdana;
}

En el ejemplo se han configurado los márgenes y la fuente del texto, que suelen ser algunas de las reglas más usadas

Selector de etiqueta HTML

Indica el estilo que se va a aplicar a un elemento o una etiqueta concreta

Su hay más de uno, serán separados por comas

h1, h2, h3, h4, h5 {
    font-size: large;
}

En el ejemplo se han configurado las etiquetas 1 a 5 de título, aplicándoles la fuente del texto de tamaño grande

Como puede apreciarse, podemos prescindir de < y de > de la etiqueta

Selector de clase

Algunos elementos HTML tienen el atributo class que indica que las clases a las cuales pertenece el elemento

Este atributo nos permite tratar a esa «clase» de elemento de una manera concreta, tanto en la aplicación de estilos CSS como en su comportamiento mediante programación con JavaScript

Para aplicar el selector de clase, usaremos etiqueta.class

.cabecera{
    color: blue;
}

En el ejemplo se han configurado el texto en color azul para todos los elementos de la clase cabecera, ya que si no especificamos una etiqueta, se usará por defecto el selector universal *

h1.cabecera{
    text-aling: center;
}

En el ejemplo se han configurado la alineación del texto centrada solo para los elementos de la clase cabecera que pertenecen a la etiqueta de título <h1>

Debemos tener especial cuidado en no dejar espacios entre la etiqueta, el punto y el nombre de la clase, ya que ese espacio es significativo, como veremos más adelante

Selector de identificador

Algunos elementos HTML tienen el atributo id que indica que ese identificador único pertenece a ese elemento concreto

Para aplicar el selector de identificador, usaremos etiqueta#id

Al igual que con las clases, es muy importante el uso de los espacios

p#destacado{
    background-color: yellow;
}

En el ejemplo se han configurado el color de fondo del texto como amarillo, en aquel párrafo que tenga el identificador destacado

Selectores descendientes y adyacentes

Estos selectores permiten seleccionar elementos contenidos dentro de otros de acuerdo a la estructura del árbol DOM

Aquí es donde toman importancia los espacios, ya que si separamos dos selectores con un espacio, entonces estaremos aplicando la regla a todos los descendientes del primer selector

section p{
    text-font: Verdana;
}

En el ejemplo se han configurado la fuente del texto como Verdana para todos los elementos <p> que son descendientes del elemento <section > (recordemos que pueden ser los descendientes de cualquier nivel, ya que esa regla será heredada)

Se pueden mezclar indistintamente selectores descendientes de clase o de identificador

section .error{
    color: red;
}

En el ejemplo se han configurado el color del texto como rojo para cualquier elemento de la clase error que sea descendiente del elemento

Si en vez de aplicarlo a todos los descendientes queremos que sólo se aplique a los descendientes directos (los hijos), entonces usaremos el simbolo >

section>p{
    text-font: Verdana;
}

En el ejemplo se han configurado la fuente del texto como Verdana sólo para los elementos <p> que son hijos del elemento <section >

También podemos seleccionar los elementos hermanos, es decir, aquellos que aparecen justo después de otros elementos, entonces usaremos el simbolo +

h1 + p{
    text-indent: 1.5em;
}

En el ejemplo se han configurado la indentación del primer párrafo que aparece justo después de la etiqueta de título <h1>

Selectores de atributos

Estos selectores se utilizan para seleccionar elementos en función de sus atributos

Hay de cuatro tipos:

1. [atributo]: elementos que tienen un atributo llamado atributo independientemente de su valor
2. [atributo=valor]: elementos que tienen un atributo llamado atributo con el valor especificado
3. [atributo^=valor]: elementos que tiene un atributo llamado atributo y cuyo valor empieza por el valor especificado
4. [atributo$=valor]: elementos que tienen un atributo llamado atributo y cuyo valor termina con el valor especificado

a {
    color: red;
}

a[href^https] {
    color: blue;
}

En el ejemplo se han configurado un enlace que queremos en un color distinto si lleva a una url con HTTP seguro

Pseudoclases

Existen selectores especiales para especificar elementos que tienen unas determinadas propiedades

Son clases virtuales, ya que no se especifican en el HTML, pero representan las posiciones o estados en los que se puede encontrar un elemento mientras se visualiza en el navegador

ul li:first-child {
    color: green;
}

En el ejemplo se han configurado para que se aplique solo si un elemento es el primer hijo de su padre, para ello hemos usado la pseudoclase first-child, solo el primer elemento <li> de una lista de viñetas (<ul>) aparecerá en color verde

Existen otras pseudoclases que nos ayudarán a seleccionar a un hermano concreto de entre los hijos de un elemento:

• :nth-child(n) : representa el n-ésimo hermano

  Permite incluir una forma más compleja como:

  • :nth-child(even) : que representa los hijos que ocupan posiciones pares
  • :nth-child(odd) : que representa los hijos que ocupan posiciones impares

  (por ejemplo para hacer que las filas impares de una tabla tengan distinto color de fondo y tener un efecto cebreado en una tabla)

• :nth-last-child(n) : similar al anterior, pero empezando a contar desde el final

Hay también pseudoclases dinámicas, que indican el estado de los elementos cuando el usuario interactúa con ellos:

• :hover : se utiliza para establecer el estilo cuando el usuario coloca el ratón sobre el elemento
• :active : se utiliza para establecer el estilo cuando el usuario pincha sobre el elemento o mantiene el botón del ratón pulsado sobre él
• :focus : se utiliza para establecer el estilo cuando el elemento tiene el foco

También son muy típicas las pseudoclases relacionadas con los los enlaces:

• a:link : establece el estilo del enlace cuando aún no se ha visitado o cuando el usuario aún no lo ha pulsado
• a:hover : establece el estilo cuando el usuario coloca el ratón sobre el elemento de enlace
• a:active : establece el estilo cuando el usuario pincha sobre el enlace
• a:visited : establece el estilo cuando el usuario ya lo ha visitado

a:link {
    color: green;
    text-decoration: none;
}
a:visited {
    color: red;
}
a:hover {
    color: blue;
}

En el ejemplo se han configurado el estado de los enlaces sin visitar, visitados o cuando pasemos el ratón sobre ellos

Al usar este CSS, los enlaces del documento aparecerán sin subrayar y en verde

Al situar el ratón sobre ellos pararán a azul y, una vez visitados, pasarán a rojo

Ejemplo de Selectores en acción

En el siguiente ejemplo se ha incluido una página HTML y varios de los selectores explicados anteriormente

Puedes comprobar el resultado visualizándolo por ti mismo en tu navegador y si no utilizas un CSS reset, podrías tener resultados distintos en otros navegadores

<!DOCTYPE html>
<html>
    <head>
<!-- Inserted by miarroba -->
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7294310421616689" crossorigin="anonymous"></script>
<script type='text/javascript' src='https://ads.vidoomy.com/miarroba_23335.js' async></script>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-T2VG59');</script>
<!-- Inserted by miarroba -->
        <title>Página de ejemplo</title>
        <meta charset="utf-8" />
        <link rel="stylesheet" type="text/css" href="./css/ejemploSelectores.css" />
    </head>

    <body>
<!-- Inserted by miarroba -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-T2VG59" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- Inserted by miarroba -->
        <header>
             Ejemplo de Selectores en acción <span> en este caso CSS3</span>
        </header>
        <nav>
            <a href="index.html">Inicio</a>
            <a href="info.html">Información</a>
            <a href="login.html">Acceso</a>
        </nav>
        <div id="index">
            <article>
                <p>Las tecnologías más utilizadas en el front-end son:</p>
                <ul class="cebreada">
                   <li>HTML5</li> 
                   <li>CSS</li>
                   <li>JavaScript</li>
                   <li>Jquery</li>
                </ul>
            </article>
            <aside>Barra lateral</aside>
        </div>
        <footer>Este es el pie de página</footer>
    <!-- Inserted by miarroba -->
</script></noframes></noembed></noscript><script type="text/javascript" src="/hosting__contador__visitas__unicas.php?h=1579157&t=1732187802&k=33fd366cac61b50d3da01632c266a34a&__muid="></script>
<!-- Inserted by miarroba -->
</body>
</html>

Ahora mostramos el contenido del fichero ejemploSelectores.css

* {
    margin: 0;
    font-family: Verdana;
}

header {
    height: 10%;
    bacground-color: lightblue;
    font-size: 30px;
}

header>span {
    font-size: 20px;
    color: grey;
    margin-left: 20px;
}

nav {
   background-color: lightgray;
   padding: 5 px;
}

nav a {
    margin-left: 15px;
    padding: 5px;
    background-color: white;
}

nav a:first-child {
    background-color: darkgray;
}

a {
   text-decoration: none;
   color: blue;
}

a:visited {
    color: lightblue;
}

a:hover {
   background-color: beige;
}

a[href^=https] {
   font-style: italic;
}

#index {
   display: flex;
   align-items: stretch;
}

article {
   width: 80%;
   bacground-color: lemonchiffon;
   min-height: 80%;
}

ul.cebreada {
   list-style-type: none;
   width: 100%;
   text-align: center;
}

ul.cebreada>li:nth-child(odd) {
   background-color: beige;
}

aside {
   width: 20%;
   bacground-color: lightsalmon;
   min-height: 80%;
}

footer {
   bacground-color: lightgreen;
   height: 5%;
}