Selectores en CSS

Desarrollo de Aplicaciones Web

Selectores básicos

Selectores básicos

Selector universal

Se puede simplificar utilizando el selector universal, consiste en un asterisco *.
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 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 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 descendente (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; }
    

    Selectores básicos

    Selector de clase

    Ejemplo de uso

    <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 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 combinadores

    Selectores combinadores

    Selector descendente

    Selecciona los elementos que se encuentran dentro de otros, cuando se encuentra entre las etiquetas de apertura y de cierre del otro elemento. 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 combinadores

    Selector descendente

    La sintaxis del selector descendente 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 descendente que se compone de cuatro selectores:

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

    Selectores combinadores

    Combinación de selectores

    No debe confundirse el selector descendente 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 combinadores

    Selector descendente

    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 combinadores

    Selector descendente

    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 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 combinadores

    Selector de hijos

    • Semejante al selector descendente.

    • Muy diferente en su funcionamiento.

    • Se utiliza para seleccionar un elemento que es hijo directo de otro elemento.

    • Se indica mediante >.

    Selectores combinadores

    Selector de hijos

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

    Selectores combinadores

    Selector adyacente

    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 combinadores

    Selector general de hermanos

    • 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.

    Selectores combinadores

    Selector

    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>
    

    Selector de atributo

    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.

    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.

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

    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>