¿Qué son los selectores de CSS y cómo funcionan?

febrero 11, 2022

Site owner using CSS selectors to customize site.jpgkeepProtocol

Crear un sitio web desde cero es una forma de crear un sitio rápido y liviano sobre el que tenga control total. Sin embargo, crear, personalizar y mantener un sitio HTML requerirá conocimientos técnicos de HTML, CSS y JavaScript y una importante inversión de tiempo.

La buena noticia es que hay muchas formas de simplificar estas etapas. Para simplificar el proceso de personalización de tu sitio web, por ejemplo, puedes usar selectores CSS.

A continuación, veremos más de cerca qué son los selectores de CSS. Luego, exploraremos los diferentes tipos, cómo puede usarlos y cómo puede combinarlos para crear un sitio web que se vea exactamente como lo desea.

¿Qué son los selectores de CSS?

Los selectores de CSS se utilizan para definir los elementos que desea diseñar con CSS. Hay muchos tipos diferentes de selectores de CSS, cada uno con su propia sintaxis única. Estos le dicen al navegador a qué elementos aplicar los valores de propiedad CSS.

El elemento o elementos a los que se dirige un selector de CSS se denominan «sujeto del selector». Se puede seleccionar un sujeto en función de su tipo de elemento, clase, nombre de ID, atributo dado o pseudoestado.

Con tantos tipos diferentes disponibles, no solo puede personalizar su sitio más rápido, sino que también puede mantener un control granular sobre su código.

A continuación, explicaremos cómo puede usar los selectores de CSS en su sitio y luego exploraremos los diferentes tipos de selectores. Empecemos.

Cómo usar selectores en CSS

Hay dos formas principales de usar los selectores en CSS. Si tiene su HTML y CSS en un documento, simplemente tiene que agregar selectores de CSS en la sección de su página web. Verá este método en los ejemplos a continuación.

Sin embargo, también puede mantener su HTML y CSS en documentos separados. En ese caso, es posible que tenga un documento HTML con la etiqueta index.html y un archivo CSS con la etiqueta style.css. El archivo index.html debe incluir una línea de código que haga referencia al archivo CSS para que estos estilos se representen en su página web.

Ese archivo HTML se vería así:

 
 
   <!DOCTYPE html>
<html lang="en">
 
<head>
  <title>CSS Selectors</title>
  <link rel="stylesheet" href="http://blog.hubspot.com/website/style.css">
</head>
 
<body>
  
  <h1>What are CSS selectors & How Do They Work?</h1>
 
<body>
</html>

Observe la línea? Esa es la referencia a su archivo CSS. Ese archivo solo incluiría los bloques selectores que verá a continuación y otros CSS personalizados.

Ahora que hemos repasado una breve descripción de cómo funcionan los selectores de CSS, veamos los principales tipos de selectores a continuación.

Tipos de selectores de CSS

A continuación, cubriremos los cuatro tipos principales de selectores de CSS. Cada uno puede ayudarlo a seleccionar diferentes grupos de elementos en una página web. Comenzaremos con el tipo que lo ayudará a enfocarse en los grupos más grandes de elementos y luego pasaremos a los tipos que se vuelven más precisos.

Para las demostraciones a continuación, usaré el Editor de código en línea de W3Schools. Eso significa que puede hacer clic en cualquiera de los enlaces Fuente para ver el fragmento de código completo detrás del ejemplo y probar el suyo propio.

selector universal

el asterisco

es el selector universal en CSS. Por defecto, selecciona todos los elementos de un documento.

Sin embargo, puede usarse en combinación con espacios de nombres. @namespace es una regla útil en documentos con varios espacios de nombres, como HTML5, SVG en línea, MathML o XML. Puede usar un espacio de nombres definido para restringir el selector universal a elementos solo dentro de ese espacio de nombres.

Sintaxis del selector universal

Un selector universal puede tener la siguiente sintaxis:
* o *|* { propiedades de estilo } – coincide con todos los elementos
ns|* {propiedades de estilo}: coincide con todos los elementos en el espacio de nombres ns

|* {propiedades de estilo}: coincide con todos los elementos sin ningún espacio de nombres definido

Ejemplo de selector universal

Digamos que quiero que cada elemento de la página sea naranja, entonces puedo usar el selector universal.

 
 
   <h1>All elements on the page, from the heading 1</h1>
<h2 class="pastoral">to the heading 2 with class=pastoral</h1>
<p>to the paragraph will be orange.</p>

Aquí está mi HTML:

 
 
   * {
color: orange;
}

Aquí está mi CSS con el selector universal que define todos los elementos.

Selector universal aplicando CSS a todos los elementos

Fuente

Selector de tipo

Un selector de tipo selecciona todos los elementos HTML que tienen un nombre de nodo dado. Por ejemplo, «a» seleccionaría todos los elementos y les aplicaría los valores de propiedad CSS. “Input” seleccionaría todos los elementos , “span” todos los elementos y así sucesivamente.

También puede usar un espacio de nombres definido para restringir el selector de tipo a elementos solo dentro de ese espacio de nombres.

Sintaxis del selector de tipo

La sintaxis de un selector de tipo es:

elemento {propiedades de estilo}

Ejemplo de selector de tipo

Digamos que mi documento contiene elementos de párrafo y de intervalo y quiero que los elementos de intervalo se resalten en naranja.

 
 
   <span>One span. </span>
<p>No span. </p>
<span>Two span.</span>
<p>No span. </p>

Aquí está mi HTML:

 
 
   span {
background-color: orange;
}

Aquí está mi CSS con el selector de tipo que define los elementos de intervalo:

Selector de tipo que aplica CSS para abarcar elementos

Fuente

Selector de clase

Un selector de clase selecciona todos los elementos que tienen un nombre de clase dado. Por ejemplo, .intro seleccionaría cualquier elemento que tenga una clase de «introducción» al igual que .index seleccionaría cualquier elemento que tenga una clase de «índice». Si está utilizando el marco de código abierto Bootstrap CSS, notará que prácticamente todos sus estilos usan clases como selectores.

Puede encontrar una lista completa de las clases de Bootstrap en W3Schools.

Sintaxis del selector de clase

La sintaxis de un selector de clase es:

.classname {propiedades de estilo}

Ejemplo de selector de clase

Digamos que quiero cambiar todos los elementos con clase =»pastoral» al color naranja.

 
 
   <h1>Not orange</h1>
<h1 class="pastoral">Very orange</h1>

Aquí está mi HTML:

 
 
   .pastoral {
color: orange
}

Aquí está mi CSS con el selector de clase que define todos los elementos con la clase «pastoral».

Dadas estas reglas, el primer h1 no tendría texto naranja y el segundo sí. Aquí está el resultado:

Selector de clases aplicando CSS a elementos con clase pastoral

Fuente

Selector de identificación

Un selector de ID selecciona un elemento en función de su atributo de ID. Por ejemplo, #toc seleccionará el elemento que tiene el ID «toc». Tenga en cuenta que este selector solo funciona si el valor dado en el selector coincide exactamente con el atributo ID del elemento.

Sintaxis del selector de ID

La sintaxis de un selector de ID es:

#idname {propiedades de estilo}

Ejemplo de selector de ID

Digamos que quiero cambiar el color y la alineación del elemento con el id «hubspot».

 
 
   <h1 id = "hubspot"> #id selector</h1>

Aquí está mi HTML:

 
 
   #hubspot {
color:orange;
text-align:right;
}

Aquí está mi CSS con el selector de ID que define el elemento con el ID «hubspot».

Selector de ID que aplica CSS al elemento con ID de hubspot

Fuente

Tenga en cuenta: si el atributo ID del elemento está escrito en minúsculas y pongo en mayúscula la «H» en mi selector de CSS, entonces el elemento no se seleccionará.

Selector de atributos[href] Un selector de atributos selecciona todos los elementos que tienen un atributo determinado o un atributo establecido en un valor específico. por ejemplo, un[href*=”hubspot”] coincidirá con todos los enlaces, mientras que un

solo hará coincidir los enlaces con «hubspot» en su URL.[href=”hubspot”]También puede usar un selector de atributos para aplicar reglas CSS a elementos con el valor dado de un atributo (y no solo la presencia de un atributo). Entonces, si quiero diseñar cualquier enlace con «hubspot» en su URL, entonces puedo usar un

También puede usar un espacio de nombres definido para restringir el selector de atributos a elementos solo dentro de ese espacio de nombres.

Sintaxis del selector de atributos

[attr] La sintaxis de un selector de atributos incluye lo siguiente:
[attr=value] { propiedades de estilo }
[attr~=value] { propiedades de estilo }
[attr|=value] { propiedades de estilo }
[attr^=value] { propiedades de estilo }
[attr$=value] { propiedades de estilo }
[attr*=value] { propiedades de estilo }

{ propiedades de estilo }

La sintaxis que utilice depende de si desea seleccionar elementos que tengan un atributo establecido en un valor específico.

Ejemplo de selector de atributos[href=”hubspot”]Digamos que quiero hacer enlaces con «hubspot» en su URL naranja. entonces puedo usar un

 
 
   <ul>
<li><a href="http://blog.com">blog.com</a></li>
<li><a href="http://hubspot.com">hubspot.com</a></li>
<li><a href="http://google.com">google.com</a></li>
<li><a href="http://blog.hubspot.com">blog.hubspot.com</a></li>
</ul>

Aquí está mi HTML:

 
 
   a[href*=”hubspot”] {
color:orange;
}

Aquí está mi CSS con el selector de atributos que define todos los enlaces que incluyen «hubspot».

Aquí está el resultado: "Selector de atributos aplicando CSS a enlaces con" punto central

en URL

Fuente

Selector de pseudoclase

Un selector de pseudoclase aplica CSS a un elemento o elementos seleccionados solo cuando se encuentran en un estado especial. Por ejemplo, :hover solo le dará estilo a un elemento cuando un usuario pase el mouse sobre él. Otros ejemplos comunes son :active, :visited y :invalid.

Sintaxis del selector de pseudoclase

La sintaxis de un pseudoselector es:

selector: pseudo-clase {propiedades de estilo}

Ejemplo de selector de pseudoclase

Digamos que quiero cambiar el color de los enlaces que el usuario ya ha visitado a verde. Quiero mantener los enlaces que el usuario no ha visitado en azul. Y quiero que los enlaces cambien a un llamativo color fucsia cuando un usuario pasa el cursor sobre ellos.

 
 
   <p>So you've already visited <a href="http://hubspot.com">blog.hubspot.com</a></li>. Why not check out our home site at <a href="http://blog.hubspot.com">hubspot.com</a>?</p>

Aquí está mi HTML:

 
 
   a:link {
color: #0000FF;
}
 
a:visited {
color: #00FF00;
}
 
a:hover {
color: #FF00FF;
}

Aquí está mi CSS con tres pseudoclases diferentes para enlaces que no han sido visitados, ya han sido visitados y sobre los que se está pasando el mouse.

Selector de pseudoclase que aplica CSS a los enlaces en función de la actividad del usuario

Fuente

Ahora que entendemos los principales tipos de selectores de CSS, veamos cómo puede combinarlos en su sitio web.

¿Cómo se agrupan múltiples selectores en CSS?

 
 
   h2 {
color: green;
}
 
.spacious {
color: green;
}

Digamos que tiene varios elementos a los que desea aplicar el mismo CSS, como un h2 y una clase de .spacious que desea convertir en verde. Podría escribir el código como dos reglas separadas, como se muestra a continuación.

O bien, puede combinar los selectores en una lista de selectores. Para crear una lista de selectores, solo tiene que enumerar varios selectores y separarlos con comas antes del corchete que contiene las propiedades de estilo. Dado que el espacio en blanco es válido antes y después de la coma, agregaré un espacio después de cada coma para que el código sea más fácil de leer.

 
 
   h2, .spacious {
color: green;
}

Por tanto, la sintaxis sería: elemento, elemento, elemento { propiedades de estilo }. Aquí está el ejemplo anterior:

 
 
   h2,
.spacious {
color: green;
}

También puede colocar selectores en su propia línea si eso hace que el código sea más fácil de leer. En ese caso, la sintaxis se vería así:

Combinar los selectores de CSS de esta manera puede ayudar a reducir el tamaño de las hojas de estilo y hacer que su página web se cargue más rápido.

Personalización con selectores CSS

Nueva llamada a la acción