--- title: Selectores slug: conflicting/Learn/CSS/Building_blocks/Selectors translation_of: Learn/CSS/Building_blocks/Selectors translation_of_original: Web/Guide/CSS/Getting_started/Selectors original_slug: Web/CSS/Introducción/Selectors ---

{{ CSSTutorialTOC() }}

{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance", "Cascading & inheritance")}}Esta 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.

Más detalles

La parte interior de las llaves es la declaración.

 La palabra clave es color, que es una propiedad, y el rojo es el valor.

El punto y coma después de el par propiedad-valor separa los posibles otros pares de  propiedad-valor en una misma declaración.

 Este tutorial se refiere a un selector como strong como un selector de etiquetas. La especificación CSS se refiere a él como un selector de tipo ( type selector).

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.

Ejemplo

Esta etiqueta HTML tiene un atributo class y un atributo id:

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

El valor de id es, principal, debe ser único en el documento; pero otras etiquetas del documento puede tener el mismo nombre de la class, Key.

En una hoja de estilo CSS, esta regla hace que todos los elementos con la class key sean verdes . (Puede ser que no todos los sean {{HTMLElement ()} "p"} elementos.)

.key {
  color: green;
}

Esta regla hace que el único elemento de id principal este en negrita:

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

Más detalles

También se pueden combinar selectores, haciendo un selector más específico.

Por ejemplo, el selector .key selecciona todos los elementos que tienen key como nombre de clase (class). El selector p.key selecciona sólo el elemento {{ HTMLElement("p") }} que tiene de nombre key.

Usted no esta limitado a los dos atributos especiales, class e id.  Se puede especificar otros atributos mediante corchetes. Por ejemplo, el selector [type='button'] selecciona todos los elementos que tienen un atributo de tipo con el  valor button.

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.

Sintaxis
selector:pseudo-class {
  property: value;
}

Listado de pseudo-classes:

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.

Selectores comunes basados en relaciones
Selector Selects
A E Cualquier elemento E que es un descendiente de un elemento A (que es: un hijo o un hijo de un hijo etc.)
A > E Cualquier elemento E que es un hijo de un elemento A
E:first-child Cualquier elemento E que es el primer hijo de su padre
B + E Cualquier elemento E que es el siguiente hermano de un elemento B (es decir: el próximo hijo del mismo padre)

Usted puede combinarlas para expresar relaciones complejas.

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

Ejemplo

Una tabla HTML tiene un atributo id, pero sus filas y las celdas no tienen identificadores individuales:

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

Estas reglas hacen que la primera celda de cada fila sea en negrita, y la segunda celda de cada fila en  la familia de fuente  monoespaciado. Esto sólo afecta a una tabla concreta del documento:

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

El resultado se ve así:

Prefix 0001 default
Más detalles

La manera mas habitual es hacer que un selector sea más específico, entonces aumentara su prioridad.

Si utiliza estas técnicas, se evita la necesidad de especificar la class o atributos ID en muchas etiquetas del documento. En su lugar, CSS hace este trabajo.

En grandes diseños donde la velocidad es importante, usted puede hacer sus hojas de estilo más eficiente evitando reglas complejas que dependen de relaciones entre los elementos.

Para más ejemplos sobre las tablas, ver Tables en la página CSS Reference.

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.

Desafíos
  1. Sin cambiar su archivo HTML, agregue una sola regla para su archivo CSS que mantenga todas las letras iniciales que mismo color que están ahora, pero hace que todo el otro texto en el segundo párrafo sea azul:
    Cascading Style Sheets
    Cascading Style Sheets
  2. Ahora cambie la regla que acaba de agregar (sin cambiar nada más), para hacer que el primer párrafo sea azul también:
    Cascading Style Sheets
    Cascading Style Sheets
Possible solution
  1. Add a rule with an ID selector of #second and a declaration color: blue;, as shown below: 
    #second { color: blue; }
    A more specific selector, p#second also works.
  2. Change the selector of the new rule to be a tag selector using p: 
    p { color: blue; }
Hide solution
See a solution for the challenge.

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="http://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.{{nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Readable_CSS", "Readable CSS")}}