CSS
Selectores

Introducción

Sintaxis

• # id
• . nombre de la clase
• : nombre de pseudo-clase
• :: nombre de pseudo-elemento
• [ attr ] / * tiene el atributo attr . * /
• [ attr = " valor "] / * tiene el atributo attr , y su valor es exactamente " valor ". * /
• [ attr ~ = " valor "] / * tiene el atributo attr , y su valor, cuando se divide en espacios en blanco , contiene " valor ". * /
• [ attr | = " valor "] / * tiene el atributo attr , y su valor es exactamente " valor ", o su valor comienza con " valor - ". * /
• [ attr ^ = " valor "] / * tiene el atributo attr , y su valor comienza con " valor ". * /
• [ attr $ = " valor "] / * tiene el atributo attr , y su valor termina con " valor ". * /
• [ attr * = " value "] / * tiene el atributo attr , y su valor contiene " value ". * /
• nombre-elemento
• *

Observaciones

Selectores de atributos

Visión general

Los selectores de atributos se pueden utilizar con varios tipos de operadores que cambian los criterios de selección en consecuencia. Seleccionan un elemento utilizando la presencia de un atributo o valor de atributo dado.

Notas:

1. El valor del atributo puede estar entre comillas simples o dobles. Ninguna cita puede funcionar, pero no es válida de acuerdo con el estándar CSS, y no se recomienda.

2. No existe una especificación CSS4 única e integrada, ya que se divide en módulos separados. Sin embargo, hay módulos de "nivel 4". Ver soporte del navegador .

Detalles

[attribute]

Selecciona elementos con el atributo dado.

div[data-color] {
  color: red;
}

<div data-color="red">This will be red</div>
<div data-color="green">This will be red</div>
<div data-background="red">This will NOT be red</div>

Demo en vivo en JSBin

[attribute="value"]

Selecciona elementos con el atributo y valor dados.

div[data-color="red"] {
  color: red;
}

<div data-color="red">This will be red</div>
<div data-color="green">This will NOT be red</div>
<div data-color="blue">This will NOT be red</div>

Demo en vivo en JSBin

[attribute*="value"]

Selecciona elementos con el atributo y valor dados donde el atributo dado contiene el valor dado en cualquier lugar (como subcadena).

[class*="foo"] {
  color: red;
}

<div class="foo-123">This will be red</div>
<div class="foo123">This will be red</div>
<div class="bar123foo">This will be red</div>
<div class="barfooo123">This will be red</div>
<div class="barfo0">This will NOT be red</div>

Demo en vivo en JSBin

[attribute~="value"]

Selecciona elementos con el atributo y valor dados donde el valor dado aparece en una lista separada por espacios en blanco.

[class~="color-red"] {
  color: red;
}

<div class="color-red foo-bar the-div">This will be red</div>
<div class="color-blue foo-bar the-div">This will NOT be red</div>

Demo en vivo en JSBin

[attribute^="value"]

Selecciona elementos con el atributo y valor dados donde el atributo dado comienza con el valor.

[class^="foo-"] {
  color: red;
}

<div class="foo-123">This will be red</div>
<div class="foo-234">This will be red</div>
<div class="bar-123">This will NOT be red</div>

Demo en vivo en JSBin

[attribute$="value"]

Selecciona elementos con el atributo y valor dados donde el atributo dado termina con el valor dado.

[class$="file"] {
  color: red;
}

<div class="foobar-file">This will be red</div>
<div class="foobar-file">This will be red</div>
<div class="foobar-input">This will NOT be red</div>

Demo en vivo en JSBin

[attribute|="value"]

Selecciona elementos con un atributo y valor dados donde el valor del atributo es exactamente el valor dado o es exactamente el valor dado seguido de - (U + 002D)

[lang|="EN"] {
  color: red;
}

<div lang="EN-us">This will be red</div>
<div lang="EN-gb">This will be red</div>
<div lang="PT-pt">This will NOT be red</div>

Demo en vivo en JSBin

[attribute="value" i]

Selecciona elementos con un atributo y valor dados donde el valor del atributo puede representarse como Value , VALUE , vAlUe o cualquier otra posibilidad que no vAlUe entre mayúsculas y minúsculas.

[lang="EN" i] {
  color: red;
}

<div lang="EN">This will be red</div>
<div lang="en">This will be red</div>
<div lang="PT">This will NOT be red</div>

Demo en vivo en JSBin

Especificidad de los selectores de atributos.

0-1-0

Igual que el selector de clase y la pseudoclase.

*[type=checkbox] // 0-1-0

Tenga en cuenta que esto significa que se puede usar un selector de atributos para seleccionar un elemento por su ID en un nivel de especificidad más bajo que si se seleccionara con un selector de ID : [id="my-ID"] apunta al mismo elemento que #my-ID pero con menor especificidad.

Vea la sección de sintaxis para más detalles.

Combinadores

Visión general

Nota: Los selectores de hermanos se dirigen a los elementos que vienen después de ellos en el documento de origen. CSS, por su naturaleza (se conecta en cascada), no puede apuntar a elementos anteriores o principales . Sin embargo, al usar la propiedad de order flexible, se puede simular un selector de hermanos anterior en medios visuales .

Combinador Descendiente: selector selector

Un combinador descendiente, representado por al menos un carácter de espacio ( ), selecciona elementos que son descendientes del elemento definido. Este combinador selecciona todos los descendientes del elemento (desde elementos secundarios hacia abajo).

div p {
  color:red;
}

<div>
  <p>My text is red</p>
  <section>
    <p>My text is red</p>
  </section>
</div>

<p>My text is not red</p>

Demo en vivo en JSBin

En el ejemplo anterior, los primeros dos elementos <p> se seleccionan ya que ambos son descendientes de <div> .

Combinador infantil: selector > selector

El combinador hijo ( > ) se utiliza para seleccionar elementos que son hijos o descendientes directos del elemento especificado.

div > p {
  color:red;
}

<div>
  <p>My text is red</p>
  <section>
    <p>My text is not red</p>
  </section>
</div>

Demo en vivo en JSBin

El CSS anterior selecciona solo el primer elemento <p> , ya que es el único párrafo que desciende directamente de un <div> .

El segundo elemento <p> no está seleccionado porque no es un elemento secundario directo de <div> .

Combinador de hermanos adyacente: selector + selector

El combinador de hermanos adyacentes ( + ) selecciona un elemento hermano que sigue inmediatamente a un elemento especificado.

p + p {
  color:red;
}

<p>My text is not red</p>
<p>My text is red</p>
<p>My text is red</p>
<hr>
<p>My text is not red</p>

Demo en vivo en JSBin

El ejemplo anterior selecciona solo aquellos elementos <p> que están precedidos directamente por otro elemento <p> .

Combinador general de hermanos: selector ~ selector

El combinador general de hermanos ( ~ ) selecciona todos los hermanos que siguen el elemento especificado.

p ~ p {
  color:red;
}

<p>My text is not red</p>
<p>My text is red</p>
<hr>
<h1>And now a title</h1>
<p>My text is red</p>

Demo en vivo en JSBin

El ejemplo anterior selecciona todos los elementos <p> que están precedidos por otro elemento <p> , estén o no inmediatamente adyacentes.

Selectores de nombre de clase

El selector de nombre de clase selecciona todos los elementos con el nombre de la clase objetivo. Por ejemplo, el nombre de clase .warning seleccionaría el siguiente elemento <div> :

<div class="warning">
    <p>This would be some warning copy.</p>
</div>

También puede combinar nombres de clase para orientar elementos más específicamente. Vamos a aprovechar el ejemplo anterior para mostrar una selección de clase más complicada.

CSS

.important {
    color: orange;
}
.warning {
    color: blue;
}
.warning.important {
    color: red;
}

HTML

<div class="warning">
    <p>This would be some warning copy.</p>
</div>

<div class="important warning">
    <p class="important">This is some really important warning copy.</p>
</div>

En este ejemplo, todos los elementos con la .warning clase tendrán un color azul, y elementos con el .important clase con tener un color anaranjado del texto, y todos los elementos que tienen tanto el .important y .warning nombre de la clase tendrán un texto de color rojo color.

Tenga en cuenta que dentro de la CSS, la declaración .warning.important no tenía ningún espacio entre los dos nombres de clase. Esto significa que solo encontrará elementos que contengan la warning ambos nombres de clase y que sean important en su atributo de class . Esos nombres de clase podrían estar en cualquier orden en el elemento.

Si se incluyera un espacio entre las dos clases en la declaración de CSS, solo seleccionaría elementos que tengan elementos primarios con nombres de clase .warning y elementos secundarios con nombres de clase .important .

Selectores de ID

Los selectores de ID seleccionan elementos DOM con el ID de destino. Para seleccionar un elemento por una ID específica en CSS, se usa # prefijo # .

Por ejemplo, el siguiente elemento div HTML ...

<div id="exampleID">
    <p>Example</p>
</div>

... se puede seleccionar mediante #exampleID en CSS como se muestra a continuación:

#exampleID {
    width: 20px;
}

Nota : las especificaciones HTML no permiten múltiples elementos con la misma ID

Pseudo-clases

Las pseudo-clases son palabras clave que permiten la selección en función de la información que se encuentra fuera del árbol del documento o que no pueden ser expresadas por otros selectores o combinadores. Esta información puede asociarse a cierto estado ( estado y pseudo-clases dinámicas ), a ubicaciones ( estructural y objetivo pseudo-clases), a negaciones de la primera (pseudo-clase de negación ) o a idiomas (pseudo-clase lang ). Los ejemplos incluyen si se ha seguido o no un enlace ( :visited ), el mouse se encuentra sobre un elemento ( :hover ), se marca una casilla de verificación ( :checked ), etc.

Sintaxis

selector:pseudo-class { 
    property: value;
}

Lista de pseudo-clases:

La :visited pseudoclase :visited no se puede usar para la mayoría de los estilos en muchos navegadores modernos porque es un agujero de seguridad. Vea este enlace para referencia.

Selectores basicos

Nota: El valor de una ID debe ser único en una página web. Es una violación del estándar HTML usar el valor de una ID más de una vez en el mismo árbol de documentos.

Se puede encontrar una lista completa de los selectores en la especificación del nivel 3 de los selectores de CSS .

Cómo diseñar una entrada de rango

HTML

<input type="range"></input>

CSS

Global booleano con casilla de verificación: marcado y ~ (combinador general de hermanos)

Con el ~ selector, puede implementar fácilmente un booleano accesible global sin usar JavaScript.

Añadir booleano como casilla de verificación

Al principio de su documento, agregue todos los valores booleanos que desee con una id única y el conjunto de atributos hidden :

<input type="checkbox" id="sidebarShown" hidden />
<input type="checkbox" id="darkThemeUsed" hidden />

<!-- here begins actual content, for example: -->
<div id="container">
    <div id="sidebar">
        <!-- Menu, Search, ... -->
    </div>

    <!-- Some more content ... -->
</div>

<div id="footer">
    <!-- ... -->
</div>

Cambiar el valor del booleano.

Puede alternar el valor booleano agregando una label con el conjunto de atributos for :

<label for="sidebarShown">Show/Hide the sidebar!</label>

Accediendo al valor booleano con CSS

El selector normal (como .color-red ) especifica las propiedades predeterminadas. Se pueden anular siguiendo los selectores de true / false :

/* true: */
<checkbox>:checked ~ [sibling of checkbox & parent of target] <target>

/* false: */
<checkbox>:not(:checked) ~ [sibling of checkbox & parent of target] <target>

Tenga en cuenta que <checkbox> , [sibling ...] y <target> deben ser reemplazados por los selectores adecuados. [sibling ...] puede ser un selector específico, (a menudo si eres perezoso) simplemente * o nada si el objetivo ya es un hermano de la casilla de verificación.

Ejemplos para la estructura HTML anterior serían:

#sidebarShown:checked ~ #container #sidebar {
    margin-left: 300px;
}

#darkThemeUsed:checked ~ #container,
#darkThemeUsed:checked ~ #footer {
    background: #333;
}

En acción

Vea este violín para una implementación de estos booleanos globales.

CSS3: ejemplo de selector de rango

<style>
input:in-range {
    border: 1px solid blue;
}
</style>



<input type="number" min="10" max="20" value="15">
<p>The border for this value will be blue</p>

La pseudo-clase CSS :in-range coincide cuando un elemento tiene su atributo de valor dentro de las limitaciones del rango especificado para este elemento. Permite a la página dar una respuesta de que el valor actualmente definido utilizando el elemento está dentro de los límites de rango. [1]

Pseudo clase infantil

"La pseudo-clase CSS: nth-child (an + b) coincide con un elemento que tiene un + b-1 hermanos delante de él en el árbol de documentos, para un valor positivo o cero dado para n" - MDN: nth-child

Seleccione el elemento utilizando su ID sin la alta especificidad del selector de ID

Este truco le ayuda a seleccionar un elemento utilizando la ID como valor para un selector de atributo para evitar la alta especificidad del selector de ID.

HTML:

<div id="element">...</div>  

CSS

#element { ... } /* High specificity will override many selectors */

[id="element"] { ... } /* Low specificity, can be overridden easily */

A. El ejemplo: no pseudo-clase & B.: focus-within CSS pseudo-class

A. La sintaxis se presenta arriba.

El siguiente selector coincide con todos <input> elementos <input> en un documento HTML que no están deshabilitados y no tienen la clase .example :

HTML:

<form>
    Phone: <input type="tel" class="example">
    E-mail: <input type="email" disabled="disabled">
    Password: <input type="password">
</form>

CSS:

input:not([disabled]):not(.example){
   background-color: #ccc;
}

La pseudo-clase :not() también admitirá selectores separados por comas en el Nivel 4 de selectores:

CSS:

input:not([disabled], .example){
   background-color: #ccc;
}

Demo en vivo en JSBin

Ver la sintaxis de fondo aquí .

B. El: enfoque dentro de la pseudo-clase CSS

HTML:

  <h3>Background is blue if the input is focused .</p>
  <div>
    <input type="text">
  </div>

CSS:

div {
  height: 80px;
}
input{
  margin:30px;
}
div:focus-within {
  background-color: #1565C0;
}

El ejemplo de selector de pseudo-clase de hijo único

La pseudo-clase CSS :only-child representa cualquier elemento que sea el único hijo de su padre.

HTML:

<div>
  <p>This paragraph is the only child of the div, it will have the color blue</p>
</div>

<div>
  <p>This paragraph is one of the two children of the div</p>
  <p>This paragraph is one of the two children of its parent</p>
</div>

CSS:

p:only-child {
  color: blue;
}

El ejemplo anterior selecciona el elemento <p> que es el hijo único de su padre, en este caso un <div> .

Demo en vivo en JSBin

El: selector de último tipo

El :last-of-type selecciona el elemento que es el último hijo, de un tipo particular, de su padre. En el siguiente ejemplo, el css selecciona el último párrafo y el último encabezado h1 .

p:last-of-type { 
  background: #C5CAE9; 
}
h1:last-of-type { 
  background: #CDDC39; 
}

<div class="container">
    <p>First paragraph</p>
    <p>Second paragraph</p>
    <p>Last paragraph</p>
    <h1>Heading 1</h1>
    <h2>First heading 2</h2>
    <h2>Last heading 2</h2>
</div>

jsFiddle