Selectores

Go to Previous Section:
Cascading & inheritanceEsta es la sección quinta del tutoriaCSS Getting Started ;En él se explica cómo se puede aplicar estilos de forma selectiva, y cómo los diferentes tipos de selectores tener diferentes prioridades. Agregar algunos atributos a las etiquetas en su documento de muestra, y utiliza estos atributos en su hoja de estilos de muestra.

Información: Selectores

CSS tiene su propia terminología para describir el lenguaje CSS. Anteriormente en este tutorial, que ha creado una línea en su hoja de estilos como esta:

strong {
  color: red;
}

En la terminología de CSS, toda esta línea es una rule (regla). Esta regla comienza con strong, que es un selector. Permite seleccionar qué elementos en el DOM se aplica la regla.

En esta página del tutorial se explica más acerca de los selectores que se pueden utilizar en las reglas CSS.

Además de añadir nombres a las etiquetas , puede usar valores en los atributos de los selectores. Esto permite que sus reglas sean más específicas.

Dos atributos tienen un estatus especial para CSS. Son class e id.

Class: Selectores de clase

Utilice el atributo class para asignarle  a un elemento un nombre de clase (class). Depende del nombre que elijas como class. Múltiples elementos en un documento pueden tener el mismo valor de la clase.

En su hoja de estilo, escriba un punto (.) antes del nombre de la clase, cuando se utiliza como un selector.

Selectores ID

Utilice el atributo id en un elemento para asignar un identificación para ese elemento. Depende de usted el nombre que elija para el ID. El nombre de ID debe ser único en el documento.
 

En su hoja de estilo, escriba un símbolo de almohadilla (#) ante el ID cuando se utiliza esto en un selector.

<p class="key" id="principal">

.key {
  color: green;
}

#principal {
  font-weight: bolder;
}

Si más de una regla se aplica a un elemento y especifica la misma propiedad, entonces el CSS da prioridad a la regla que tiene el selector más específico. Un selector ID es más específico que un selector de class, que a su vez es más específico que un selector (tag) de etiquetas.

Si la hoja de estilo tiene reglas en conflicto y son igualmente específicas, entonces el CSS da prioridad a la regla que está después en la hoja de estilos.

Cuando usted tiene un problema con las reglas en conflicto, trate de resolverlo haciendo una de las normas más específicas, para que tenga prioridad. Si usted no puede hacer esto, trate de mover una de las reglas mas cerca del final de la hoja de estilos para que tenga la prioridad.

Las pseudo-clases de los selectores

Una pseudo-clase  pseudo-class es en  CSS una palabra clave añadida a los selectores, que especifica un estado especial del elemento a seleccionar. Por ejemplo {{Css Href (": hover")}} aplicará un estilo cuando el usuario se desplaza sobre el elemento especificado mediante el selector.

Las Pseudo-classes, junto con los pseudo-elements, permiten aplicar un estilo a un elemento no sólo en relación con el contenido de la estructura del documento, sino también en relación a los factores externos, como la historia del navegador por ejemplo: ({{href css (": visited ")}}, ), el estado de su contenido (como {{ref css (": :checked")}} en algunos elementos de formulario), o la posición del ratón (como {{cssxref (":hover ")}} que le permite saber si el ratón está sobre un elemento o no). Para ver una lista completa de selectores, visite especificación CSS3 Selectores de trabajo CSS3 Selectors working spec.

selector:pseudo-class {
  property: value;
} 

Listado de pseudo-classes:

• :link
• :visited
• :active
• :hover
• :focus
• :first-child
• :last-child
• :nth-child
• :nth-last-child
• :nth-of-type
• :first-of-type
• :last-of-type
• :empty
• :target
• :checked
• :enabled
• :disabled

Información: Los selectores basados en relaciones (relationships)

El CSS tiene algunas formas de seleccionar elementos en función de las relaciones entre los elementos. Usted puede utilizar estas para hacer selectores que sean más específicos.

Usted puede combinarlas para expresar relaciones complejas.

También puede utilizar el símbolo asterisco (*) para significar "cualquier elemento".

<table id="data-table-1">
...
<tr>
<td>Prefix</td>
<td>0001</td>
<td>default</td>
</tr>
...

    #data-table-1 td:first-child {font-weight: bolder;}
    #data-table-1 td:first-child + td {font-family: monospace;}

Action: Using class and ID selectors

1. Edite su archivo HTML, y duplicar el párrafo copiando y pegando.
2. A continuación, agregue los atibutos  id y class a la primera copia, y un atributopara la segunda copia como se muestra a continuación. Alternativamente, copie y pegue el archivo entero de nuevo:

   <!doctype html>
   <html>
     <head>
     <meta charset="UTF-8">
     <title>Sample document</title>
     <link rel="stylesheet" href="style1.css">
     </head>
     <body>
       <p id="first">
         <strong class="carrot">C</strong>ascading
         <strong class="spinach">S</strong>tyle
         <strong class="spinach">S</strong>heets
       </p>
       <p id="second">
         <strong>C</strong>ascading
         <strong>S</strong>tyle
         <strong>S</strong>heets
       </p>
     </body>
   </html>
   

3. Ahora edite su archivo CSS. Reemplazar todo el contenido con:

   strong { color: red; }
   .carrot { color: orange; }
   .spinach { color: green; }
   #first { font-style: italic; }
   

4. Guarde los archivos y actualizar el navegador para ver el resultado:

   Cascading Style Sheets

   Cascading Style Sheets

   Puede intentar reordenar las líneas en el archivo CSS de mostrar de que el orden no efecta.

   Los selectores de class.carrot and .spinach tienen prioridad sobre el selector de etiquetas strong.

   El ID selector #first tiene prioridad sobre los selectores de clase y etiqueta.

Action: Using pseudo-classes selectors

1. Cree un HTML como el siguiente:

   <!doctype html>
   <html>
     <head>
     <meta charset="UTF-8">
     <title>Sample document</title>
     <link rel="stylesheet" href="style1.css">
     </head>
     <body>
       <p>Go to our <a class="homepage" href="https://www.example.com/" title="Home page">Home page</a>.</p>
     </body>
   </html>
   

2. Ahora edite su archivo CSS. Reemplace todo el contenido con:

   a.homepage:link, a.homepage:visited {
     padding: 1px 10px 1px 10px;
     color: #fff;
     background: #555;
     border-radius: 3px;
     border: 1px outset rgba(50,50,50,.5);
     font-family: georgia, serif;
     font-size: 14px;
     font-style: italic;
     text-decoration: none;
   }
   
   a.homepage:hover, a.homepage:focus, a.homepage:active {
     background-color: #666;
   }
   

3. Guarde los archivos y actualice el explorador para ver el resultado (poner el ratón sobre el siguiente enlace para ver el efecto):

   Go to our Home page

Acción: Uso de selectores basados en las relaciones y pseudo-clases

Con selectores basados en las relaciones y pseudo-clases puede crear algoritmos complejos en cascada . Esto es una técnica común que se utiliza, por ejemplo, con el fin de crear menús desplegables en puro CSS (es decir sólo CSS, sin necesidad de utilizar JavaScript). La esencia de esta técnica es la creación de una regla como la siguiente:

div.menu-bar ul ul {
  display: none;
}

div.menu-bar li:hover > ul {
  display: block;
}

Aplicararemos a una estructura de HTML como el siguiente:

<div class="menu-bar">
  <ul>
    <li>
      <a href="example.html">Menu</a>
      <ul>
        <li>
          <a href="example.html">Link</a>
        </li>
        <li>
          <a class="menu-nav" href="example.html">Submenu</a>
          <ul>
            <li>
              <a class="menu-nav" href="example.html">Submenu</a>
              <ul>
                <li><a href="example.html">Link</a></li>
                <li><a href="example.html">Link</a></li>
                <li><a href="example.html">Link</a></li>
                <li><a href="example.html">Link</a></li>
              </ul>
            </li>
            <li><a href="example.html">Link</a></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

Vea nuestro ejemplo completoCSS-based dropdown menu example para una posible referencia.

¿Y ahora qué?

Su hoja de estilos de muestra está empezando a parecer densa y complicada. La siguiente sección describe maneras de hacer CSS más fácil de leer. easier to read.Go to Next Section:
Readable CSS