CSS - SELECTORES Y CLASES

En esta sesión demostramos el uso de selectores y clases en CSS

Cargando video...

NOTA: Solo puedes ver una versión limitada del video a baja resolución, si quieres ver la versión completa por favor regístrate y obtén alguno de nuestros planes!

Descripción del Vídeo

Los selectores en CSS definen el objetivo sobre el que se aplicará una regla, y los tipos básicos de selectores son:

Tipo de elemento (etiqueta)

Clase (comienza con punto ej: .negrillas)

ID del elemento (comienza con numeral, ej: #nota)

Seudo-elementos y Seudo-clases

Se pueden combinar varios selectores en una regla especificando su relación (descendientes, hijos, adyacentes, hermanos) o agrupar selectores con el mismo bloque de estilo.

Es común que a un elemento dado se aplique una combinación de varias reglas.

Los navegadores incluyen estilos predeterminados, que el usuario puede personalizar en sus preferencias.  Es común utilizar una hoja de estilo tipo "reset.css" para tratar de que una página tenga el mismo estilo en la mayor cantidad posible de navegadores

Referencias:

Seudo-clases: https://developer.mozilla.org/es/docs/Web/CSS/Pseudo-classes
Seudo-elementos: https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements
Descargar Firebug (extension para Firefox): http://getfirebug.com


Ejemplos de "reset.css":
http://meyerweb.com/eric/tools/css/reset/
http://cssreset.com/


-- 10-css-selectores.html

<!DOCTYPE html>
<html lang="es">
  <head>
    <title>Selectores en CSS</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="selectores.css">
  </head>
  <body>
    <h1>Encabezado 1</h1>
    <h1>Encabezado 1 <small>con texto pequeño</small></h1>

    <hr>

    <h2>Encabezado 2</h2>

    <div class="ejemplo">
      <h2>Encabezado dentro de bloque de ejemplo</h2>
      Texto de ejemplo...
    </div>

    <div class="ejemplo">
      <h2>Lista de Enlaces</h2>
      <!-- Los siguientes enlaces obedecen a las reglas generales de
           estilo definidas arriba (variarán de color según el estado) -->
      <ul>
        <li><a href="#1">Enlace 1</a></li>
        <li><a href="#2">Enlace 2</a></li>
        <li><a href="#3">Enlace 3</a></li>
        <li><a href="#4">Enlace 4</a></li>
      </ul>
    </div>

    <!-- En el siguiente bloque, no se aplica la regla del encabezado h2
         anterior, ya que no es un hijo directo del div .ejemplo -->
    <div class="ejemplo">
      <div id="ejemplo3">
        <h2>Otro encabezado</h2>
        <!-- A los siguientes enlaces no se les aplica la regla general,
             ya que se dió una regla más específica para los enlaces
             contenidos en el #ejemplo3 -->
        <ul>
          <li><a href="#">Enlace 1</a></li>
          <li><a href="#">Enlace 2</a></li>
          <li><a href="#">Enlace 3</a></li>
          <li><a href="#">Enlace 4</a></li>
        </ul>
      </div>

      <!-- Si queremos sólo un texto en negrillas, sería mejor utilizar
          <strong> directamente. Aquí especificamos dos clases en el mismo
          elemento (pueden escribirse tantas como sea necesario, separadas
          por espacio) -->
      <p>Párrafo con <span class="negrillas texto-resaltado">texto 
         resaltado y negrillas</span>. </p>
      <!-- Estos separadores "hr" tendrán aplicada una regla de estilo -->
      <hr>
      <p>Otro párrafo</p>
      <hr>
      <!-- Éste, al ser el último párrafo de su padre, tendrá un estilo
           especial -->
      <p>Y otro más...</p>
    </div>

  </body>
</html>

-- selectores.css
/* Las propiedades definidas para "body" se aplicarán a muchos
    de los elementos del documento */
body {
  color: #999;
  background-color: white;
}
h1 { color: black }

/* Agrupamos varios selectores separados con coma, cuando queremos
    aplicar el mismo bloque de estilo */
h1, h2 {
  text-align: center;
}

/* La siguiente regla, se aplica a las etiquetas "small" contenidas
    en un encabezado de primer nivel */
h1 small {
  color: grey;
}

/* Las especificaciones de clase comienzan con punto */
.ejemplo {
  padding: 10px;
  background-color: #fff;
  border: 2px solid #ccc;
  margin-bottom: 15px;
}

/* La siguiente regla se aplica a encabezados de segundo nivel
    que sean hijos inmediatos de un elemento con clase "ejemplo" */
.ejemplo > h2 {
  color: white;
  background-color: grey;
  text-align: left;
  margin-top: 0px;
}

/* Ahora especificamos una regla con seudo-clase (before) para
    visualizar de manera automática una frase antes del título
    de cada bloque de ejemplos. Especificamos un solo separador (:)
    para mantener compatibilidad con navegadores un poco más
    antiguos (IE) que aún no soportan el separador doble (::) de
    CSS3 para seudo-elementos */
.ejemplo > h2:before {
  content: '* Ejemplo: ';
}

/* Ejemplo de Seudo-clases para enlaces */
/* Enlace no visitado */
a:link {
  color: #FF0000;
}

/* Enlace visitado */
a:visited {
  color: #00FF00;
}
/* Puntero sobre el enlace */
a:hover {
  color: #FF00FF;
}

/* Enlace seleccionado */
a:active {
  color: #0000FF;
}

/* Colocamos en verde los enlaces contenidos específicamente dentro
    del elemento identificado como "ejemplo3" */
#ejemplo3 a {
  color: green;
}

/* Para el ejemplo, usamos el seudo-elemento de "hijo número X" para
    dar un estilo particular al segundo enlace dentro de las listas
    contenidas en #ejemplo3. Comúnmente, para algo tan específico,
    lo más recomendable sería darle un ID particular a dicho enlace,
    ya que la posición relativa puede variar al agregar o quitar
    elementos */
#ejemplo3 ul :nth-child(2) a {
  color: lightblue;
}

/* La siguiente regla se aplica a todos los hr (horizontal rule,
    o líneas horizontales) que se colocan como separadores entre
    párrafos */
p + hr {
  width: 30%;
  text-align: center;
  color: #ccc;
}

/* Usamos otro seudo-elemento para dar formato especial a todos los
    párrafos que sean el último de su contenedor (p.e., como una
    especie de conclusión) */
p:last-of-type {
  text-align: right;
  color: black;
  font-size: 120%;
  width: 30%;
  margin: auto;
}

.negrillas { font-weight: bold }
.texto-resaltado { background-color: yellow }

Rating

Global

Ver video en playlist

comments powered by Disqus

Headshot of Juan Paredes

Juan Paredes

Ingeniero de Sistemas con amplia experiencia, especializado en el desarrollo y arquitectura de software.