Espera por favor...

Selectores en CSS
Introducción

    Los selectores en CSS se emplean para elegir los elementos HTML que se han de estilizar en una web. Hay gran variedad de selectores CSS, que proporcionan mucha precisión para seleccionar el elemento adecuado. En los siguientes apartados se describen los distintos tipos en detalle y su funcionamiento.

    Los selectores se dividen en las siguientes categorías:

    • Selectores simples: Seleccionan los elementos por el nombre del tipo de elemento, class o su id.

    • Selectores de atributos: Seleccionan los elementos por los valores de sus atributos.

    • Pseudoclases: Seleccionan los elementos por el estado en que se encuentran, cómo haber aparecido al pasar el ratón, o deshabilitado o seleccionado, o por ser el primer hijo de su padre en el árbol DOM. Las pseudoclases se definen añadiendo dos puntos antes de la pseudoclase concreta. En el caso de existir selectores de etiqueta, id o clases, estas se escribirían a su izquierda.

      • Estructura CSS

    • Pseudoelementos: Selecciona los elementos por su situación en relación a otro elemento, por ejemplo: la primera palabra de cada párrafo, o el contenido que se encuentra justo después de un elemento. De vez en cuando se utilizan dos puntos dobles (::) en vez de solo uno (:), esto forma parte de CSS3 y de un intento para distinguir pseudoelementos de pseudoclases.

    • Combinadores: No son en sí mismos selectores, sino formas de combinar dos o más selectores de forma práctica para una selección especial. Por ejemplo, se pueden seleccionar párrafos que sean descendientes de divs, o párrafos situados justo después de títulos.

    • Selectores múltiples: Tampoco son selectores en sí mismos; se pueden agrupar múltiples selectores en la misma regla CSS separados por comas, para aplicarlos a una de las declaraciones o a todos los elementos seleccionados por estos selectores.

Selectores en CSS
Básicos

    Selector universal

    Se puede simplificar el disño utilizando el selector universal, consiste en un asterisco *.

    Selector universal CSS

    Por ejemplo, para eliminar el margen y el relleno de todos los elementos HTML y usar una fuente de 8 mm:

    * {
    margin: 0;
    padding: 0;
    font-size: 8mm;
    }

Selectores en CSS
Básicos

    Selector de tipo o etiqueta

    Selecciona todos los elementos de la página cuya etiqueta HTML coincide con el valor del selector.

    El siguiente ejemplo selecciona todos los párrafos de la página:

    p { color: blue; }

Selectores en CSS
Básicos

    Selector de clase

    Permite aplicar estilo de párrafo a uno de entre varios en secuencia

    • El selector universal (*) no se puede utilizar porque selecciona todos
    • El selector de tipo o etiqueta (p) tampoco se puede utilizar porque seleccionaría todos
    • El selector descendiente (body p) tampoco se puede utilizar porque todos se encuentran en el mismo sitio

    Se utiliza el atributo class de HTML sobre ese elemento para indicar directamente la regla CSS que se le debe aplicar. Ejemplo, con estilo:

    .interesante { color: red; }

    Ejemplo:

    <body>
    <style type="text/css">
    .interesante { color: red; }
    </style>
    <p class="interesante">
    Párrafo 1...</p>
    <p>Párrafo 2...</p>
    <p>Párrafo 3...</p>
    </body>

Selectores en CSS
Básicos

    Selector ID

    Permite seleccionar un elemento de la página a través del valor de su atributo id

    El valor del atributo id no se puede repetir en dos elementos

    Emplea como prefijo el símbolo sostenido (#) en vez del punto (.)

    #muyimportante { color: red; }
    <p>Primer párrafo</p>
    <p id="muyimportante">
    Segundo párrafo
    </p><p>Tercer párrafo</p>

Selectores en CSS
Combinadores

    Selector descendiente

    Selecciona los elementos que se encuentran dentro de otros, cuando se encuentra entre las etiquetas de apertura y de cierre del otro elemento.

    Selector descendiente CSS

    En el siguiente ejemplo

    p span { color: green; }
    h1 span { color: blue; }

    los elementos <span> que se encuentran dentro de un elemento <p> se muestran de color verde. Los elementos <span> que se encuentran dentro de un elemento <h1> se muestran de color azul. El resto de elementos <span> de la página, se muestran con el color por defecto aplicado por el navegador.

Selectores en CSS
Combinadores

Selector descendiente

La sintaxis del selector descendiente es:

selector1 selector2 selector3 ... selectorN

El último selector indica el elemento sobre el que se aplican los estilos.

Los selectores anteriores indican el lugar en el que se debe encontrar ese elemento.

Ejemplo de selector descendiente que se compone de cuatro selectores:

p a span em { text-decoration: underline; }

Selectores en CSS
Combinadores

Combinación de selectores

No debe confundirse el selector descendiente con la combinación de selectores.

/* El estilo se aplica a todos los elementos "p", "a", "span" y "em" */

p, a, span, em { text-decoration: underline; }

/* El estilo se aplica solo a los elementos "em" que se encuentran dentro de "p a span" */

p a span em { text-decoration: underline; }

Selectores en CSS
Combinadores

Selector descendiente

Se puede restringir el alcance del selector descendente combinándolo con el selector universal. El siguiente ejemplo, muestra los dos enlaces en rojo:

p a { color: red; }
<p><a href="#">Un enlace</a></p>
<p><span><a href="#">Otro enlace</a></span></p>

En este otro ejemplo solo el segundo enlace aparece en color rojo:

p * a { color: red; }
<p><a href="#">Un enlace</a></p>
<p><span><a href="#">Otro enlace</a></span></p>

El selector p * a se interpreta como todos los elementos de tipo <a> que se encuentren dentro de cualquier elemento que, a su vez, se encuentre dentro de un elemento de tipo <p>. Como el primer elemento <a> se encuentra directamente bajo un elemento <p>, no se cumple la condición del selector p * a.

Selectores en CSS
Combinadores

Selector descendiente

Por ejemplo, con este selector se da estilo a todos lo elementos que tengan un atributo class de valor "parrafo" y estén contenidos dentro de un elemento con un atributo ID de valor "contenedor":

#contenedor .parrafo {
margin: 7px; padding: 2px; background-color: red; }

En el siguiente código HTML, se da estilo al primer y tercer párrafo, pues cumplen con el selector creado. El segundo párrafo no tiene la clase de valor "parrafo".

<div id="contenedor">
<p class="parrafo">texto</p>
<p>texto</p>
<a href="#"><p class="parrafo">texto</p></a>
</div>

Selectores en CSS
Combinadores

Otros selectores

  • Con los selectores vistos es posible diseñar cualquier página.

  • Hay otros selectores considerados como avanzados.

  • Simplifican las hojas de estilo.

Selectores en CSS
Combinadores

Selector de hijos

Aunque el selector descendiente es bastante interesante, nos puede interesar hacer la misma operación, pero en lugar de seleccionar todos los elementos descendientes, seleccionar sólo los descendientes directos del elemento, descartando así nietos y sucesivos.

Selector de hijos CSS

Por ejemplo, con este selector se asigna el estilo de color rojo al contenido de la primera etiqueta <span>, según el código HTML indicado a continuación del estilo:

p > span {
color: red;
}

<p>texto<span>texto</span>más texto</p>
<p><a href="#">texto<span>texto</span></a>más texto</p>

Selectores en CSS
Combinadores

Selector de hijos

Otro ejemplo:

<nav>
   <h2>Menú principal</h2>
   <ul>
      <li>Apartado 1</li>
      <li>Apartado 2</li>
      <ul>
         <li>Sección A</li>
         <li>Sección B</li>
         <li>Sección C</li>
      </ul>
      <li>Apartado 3</li>
      <li>Apartado 4</li>
      <li>Apartado 5</li>
      <li>Apartado 6</li>
   </ul>
</nav>

nav ul li {background-color:red}
nav > ul > li {background-color:red}

Selectores en CSS
Combinadores

Selector adyacente

  • Selecciona elementos que se encuentran justo a continuación de otros.

  • Emplea el signo + para separar los dos elementos.

  • Los elementos que forman el selector adyacente deben cumplir las siguientes condiciones:
      • - elemento1 y elemento2 deben ser elementos hermanos, por lo que su elemento padre debe ser el mismo
      - elemento2 debe aparecer inmediatamente después de elemento1 en el código

    Selector adyacente CSS

    Por ejemplo, en el siguiente código la regla se aplica tanto al segundo como al tercer párrafo, ya que el segundo es hermano directo del primero y el tercero es hermano directo del segundo.

    p + p {
    color: navy;
    font-size: 14px;
    }

    <p>Un texto</p>
    <p>Otro texto</p>
    <p>Otro texto más</p>

Selectores en CSS
Combinadores

Selector de hermanos general

Es posible que sea necesario ser menos específico y en lugar de seleccionar los elementos hermanos que sean adyacentes, se han de seleccionar todos los hermanos en general, sin necesidad de que sean adyacentes. Esto se puede conseguir con el selector hermano general, que se simboliza con el símbolo ~.

Selector hermano general CSS

  • Selecciona un (elemento2) que es hermano de otro (elemento1) y se encuentra detrás en el código HTML.

  • Emplea el signo ~ para separar los dos elementos.

  • En el selector adyacente la condición adicional era que los dos elementos debían estar uno detrás de otro en el código HTML, mientras que en este la única condición es que uno esté detrás de otro.

En este ejemplo se seleccionan los dos primeros párrafos, pues ambos son hermanos de <h2> y se encuentran después de él en el HTML. El tercer párrafo, por contra, no se selecciona, ya que aunque se encuentra después de <h2>, no es su hermano.

h2 ~ p {
margin: 10px 0;
}

<h2>Título</h2>
<p>Un texto</p>
<p>Otro texto</p>
<div class="caja">
<p>Otro texto más</p>
</div>

Selectores en CSS
Selector de atributo

Atributo en HTML

  • Selecciona un elemento basándose en la presencia y/o valor de un atributo en HTML.

  • Se declara usando corchetes.

  • Para la selección del elemento hay seis posibilidades.

  • Se puede seleccionar el atributo o también su valor.

Selectores en CSS
Selector de atributo

Atributo en HTML

  • elemento[atributo]: selecciona todos los elementos que disponen de ese atributo.

  • elemento[atributo^="valor"]: selecciona todos los elementos que disponen de ese atributo y cuyo valor comienza exactamente por la cadena de texto indicada.

  • elemento[atributo$="valor"]: selecciona todos los elementos que disponen de ese atributo y cuyo valor termina exactamente en la cadena de texto indicada.

  • elemento[atributo*="valor"]: selecciona todos los elementos que disponen de ese atributo y cuyo valor es exactamente el de la cadena de texto. En este caso el asterisco (*) es opcional.

  • elemento[atributo~="valor"]: selecciona todos lo elementos que disponen de ese atributo y cuyo valor es una lista de palabras separadas por espacios en blanco, en la que al menos una es exactamente igual a valor.

  • elemento[nombre_atributo|="valor"]: selecciona todos lo elementos que disponen de ese atributo y cuyo valor es una serie de palabras separadas con guiones y que comienza con valor. Este selector sólo es útil para atributos de tipo lang.

Selectores en CSS
Selector de atributo

Atributo en HTML

    En este ejemplo se selecciona la etiqueta input que tiene el atributo type y cuyo valor es exactamente text y se le da color de fondo #444 y ancho de 150px. Se selecciona otra etiqueta input, pero esta vez la que tiene el atributo placeholder y cuyo valor empieza por http. Evidentemente se podría haber hecho lo mismo usando el selector class o el selector ID, pero dependiendo de la situación vendrá mejor una u otra solución.

    input[type="text"] {
    background-color: #444;
    widht: 150px;
    }
    input[placeholder^="http"] {
    color: blue;
    }

Selectores en CSS
Selector de atributo

Atributo en HTML

<form class="contact_form" action="#" method="post">
<label for="name">Nombre:</label>
<input type="text" name="nombre" placeholder="Nombre y apellidos" autofocus required />
<label for="email">Email:</label>
<input type="email" name="email" placeholder="ejemplo@ejemplo.com" required />
<label for="website">Sitio Web:</label>
<input type="url" name="web" placeholder="http://www.tuweb.com" />
<label for="Mensaje">Mensaje:</label>
<textarea name="mensaje" required ></textarea>
<button type="submit">Enviar</button>
</form>

Búsquedas en UMU