Helpful resources ▼
  Download   Pricing   Buy

Tutorial de selectores CSS – Tipos, sintaxis y ejemplos HTML

Los selectores CSS apuntan a elementos HTML para que las reglas CSS se apliquen solo donde corresponde. Use selectores de tipo, clase, ID, atributo, grupo, combinador y pseudo para aplicar estilos por nombre, estado, posición, relación o valor de atributo.

En este tutorial aprenderá cómo funcionan los selectores CSS y cómo aplicarlos para seleccionar los elementos HTML a los que desea dar estilo. Verá selectores básicos, selectores de atributos, selectores de grupo, selectores combinadores y pseudoselectores. Conocer los selectores CSS resulta útil para desarrolladores front-end, diseñadores web y cualquier persona que trabaje con HTML, XHTML y CSS.

Selectores CSS con Aspose.HTML for .NET

Los ejemplos de este artículo explican la sintaxis estándar de los selectores CSS. Como este tutorial forma parte de la documentación de Aspose.HTML, también puede usar la misma sintaxis de selectores mediante programación con QuerySelector() y QuerySelectorAll() en Aspose.HTML for .NET. Consulte Usar selectores CSS en C# para ver ejemplos en C#.

Tipos de selectores CSS

Los selectores CSS se usan para seleccionar los elementos HTML a los que desea aplicar estilo y para aplicar un conjunto de reglas CSS. Existen varios tipos de selectores CSS:

Puede combinar selectores CSS de muchas formas para lograr gran especificidad y flexibilidad.

Selectores básicos

Los selectores CSS básicos seleccionan elementos HTML según su id, clase, tipo o todos los elementos de la página web.

Selector de tipo o selector de elementos CSS

El selector de tipo o selector de elementos especifica a qué elementos debe aplicarse una regla nombrando el tipo de elemento, como <h1>. En otras palabras, el selector de elementos selecciona elementos HTML según el nombre del elemento.

CSS

1h1 {
2	text-align: center;
3	color: DarkRed;
4}

Ejemplo HTML

1<h1>Aspose.HTML for .NET</h1>
2<p>Aspose.HTML for .NET is a cross-platform class library that enables your applications to perform a wide range of HTML manipulation tasks.</p>

Resultado renderizado al aplicar un selector CSS de tipo a un elemento h1

Selector de ID

El selector de ID selecciona un elemento específico mediante el atributo id de un elemento HTML. Un elemento se selecciona si su atributo id coincide exactamente con el valor indicado en el selector de ID.

CSS

1#demo {
2  	background-color: #fcded4;
3	font-size: 24pt;
4}

Ejemplo HTML

1<p id="demo">This paragraph has a special ID on it!</p>
2<p>This is just a regular paragraph.</p>

Resultado renderizado al aplicar un selector CSS de ID a un párrafo

Selector de clase

El selector de clase coincide con elementos HTML que tienen un atributo class específico. Puede usar el atributo class en todos los elementos HTML válidos dentro de la sección body de un documento HTML, incluido el propio elemento <body>. Para seleccionar elementos con una clase concreta, escriba un punto (.) seguido del nombre de la clase. Por ejemplo, si queremos que todos los elementos con la clase "main" tengan otro color de fondo, color de texto y tamaño de fuente, usaríamos la siguiente regla CSS:

CSS

1.main {
2	background-color: #d4e9fc;
3	color: red;
4    font-size: 16pt;
5}

Ejemplo HTML

1<h1>CSS Class Selector</h1>
2<p>The class attribute and its value can be used to create a CSS selector that refers to the selected web element.</p>
3<p class="main">The dot (.) is used to indicate the class attribute to create the CSS Class selector.</p>

Resultado renderizado al aplicar un selector CSS de clase a un párrafo seleccionado

Selector universal

El selector universal se usa para seleccionar todos los elementos de una página web. Por ejemplo, si queremos que cada elemento tenga el texto centrado y color azul, usaríamos la siguiente regla CSS:

CSS

1* {
2    text-align: center;
3    color: #0154a2;
4}

Ejemplo HTML

1<h1>CSS Universal Selector</h1>
2<p>The Universal Selector selects all elements. The star symbol will target every single element on the page.</p>

Resultado renderizado al aplicar el selector universal CSS a todos los elementos

Selectores de atributos

Los selectores de atributos CSS ofrecen una forma sencilla y eficiente de aplicar estilos a elementos HTML según la presencia de un atributo concreto o de un valor de atributo. Es una forma útil de aplicar estilo a elementos HTML agrupándolos por ciertos atributos; el selector de atributos seleccionará los elementos con atributos similares. Puede crear un selector de atributos colocando el atributo entre corchetes:

Selector CSSEjemploDescripción
[attribute][translate]Selecciona todos los elementos que tienen un atributo llamado translate.
[attribute=value][translate=no]Selecciona todos los elementos con translate="no". Representa elementos con un atributo llamado translate cuyo valor es exactamente no.
[attribute~=value][title~=flower]Selecciona todos los elementos con un atributo title que contiene la palabra flower.
[attribute|=value][lang|=de]Selecciona todos los elementos cuyo valor del atributo lang es igual a “de” o comienza por “de-”. Se usa a menudo para coincidencias de subcódigos de idioma.
[attribute^=value]a[href^="#"]Selecciona cada elemento <a> cuyo valor del atributo href empieza por "#" (enlaces internos).
[attribute$=value]a[href$=".html"]Selecciona cada elemento <a> cuyo valor del atributo href termina en ".html".
[attribute*=value]a[href*=“aspose”]Selecciona cada elemento <a> cuyo valor del atributo href contiene “aspose” en cualquier parte de la URL.

Veamos uno de los selectores de atributos CSS como ejemplo:

CSS

1h3[class*="1"] {
2    background-color: #b4e8fd;
3}

Ejemplo HTML

1<h3 class="test-1">CSS Attribute Selector</h3>
2<h3>CSS Attribute Selector</h3>
3<h3 class="12">CSS Attribute Selector</h3>

Resultado renderizado al aplicar un selector CSS de atributos a elementos h3

Selectores de grupo

Puede aplicar estilo a muchos selectores si lo desea. Solo debe separarlos con una coma, como se muestra en el siguiente ejemplo:

CSS

1h1, h2, h3 {
2    color: #36C;
3    font-family: helvetica;
4}

Ejemplo HTML

1<h1>CSS Group Selector (,)</h1>
2<h2>The defined style will apply to h1, h2 and h3 elements.</h2>
3<h3>The order of the list doesn't matter.</h3>

Resultado renderizado al aplicar un selector CSS de grupo a elementos h1, h2 y h3

Selectores combinadores

Los selectores combinadores seleccionan elementos según la relación entre ellos. CSS tiene cuatro combinadores distintos: selector descendiente (espacio), selector de hijo (>), selector de hermano adyacente (+) y selector general de hermanos (~):

Selector CSSEjemploDescripción
element elementdiv pEl combinador " " (espacio) selecciona todos los elementos <p> que son descendientes del primer elemento <div>.
element>elementdiv > spanEl combinador > selecciona todos los elementos <span> cuyo padre es un elemento <div>.
element+elementdiv + pSelecciona el primer elemento <p> situado inmediatamente después de elementos <div>. El combinador + coincide con el segundo elemento solo si sigue inmediatamente al primero.
element~elementdiv ~ pEl combinador ~ selecciona hermanos. Esto significa que selecciona cada elemento <p> precedido por un elemento <div>.

Veamos uno de los selectores combinadores CSS como ejemplo. El selector de hijo (>) selecciona todos los elementos que son hijos de un elemento especificado. Los elementos que coinciden con el segundo selector deben ser hijos directos de los elementos que coinciden con el primer selector:

CSS

1div > p {
2	background-color: #d4e9fc;
3}

Ejemplo HTML

1<div>
2    <p>CSS Child Selector (>). Paragraph 1 is in a div.
3    <section>
4        <p>Paragraph 2 is in a div but inside a section element. It is not a direct child of the div element that matches the first selector. Therefore, there is no background color!</p>
5    </section>
6    </p>
7</div>
8<p>Paragraph 3 is not in the div at all.</p>

Resultado renderizado al aplicar un selector combinador CSS de hijo

Pseudoselectores

Los pseudoselectores permiten dar formato a elementos basándose en información distinta de la posición del elemento en el árbol del documento. Los selectores de pseudoclase y pseudoelemento van precedidos por dos puntos : y ::.

La pseudoclase se usa para definir un estado especial de un elemento. Por ejemplo, puede utilizarse para aplicar estilo cuando el usuario pasa el cursor sobre un elemento, o para dar estilos distintos a enlaces visitados y no visitados. Un pseudoelemento CSS se usa para dar estilo a partes concretas de un elemento. Por ejemplo, p::first-letter puede usarse para cambiar la primera letra de un párrafo.

Veamos uno de los selectores de pseudoelemento CSS como ejemplo:

CSS

1p::first-letter {
2	font-size: 130%;
3	color: red;
4	font-family: arial;
5}

Ejemplo HTML

1<p>Pseudo-Element Selectors</p>
2<p>A CSS Pseudo-Element is used to style specified parts of an element.</p>
3<p>For example, p::first-letter can be used to change the first letter of a paragraph.</p>

Resultado renderizado al aplicar un selector CSS de pseudoelemento a la primera letra de párrafos

FAQ

¿Cuál es la diferencia entre selectores de clase e ID?

Un selector de clase como .main puede coincidir con muchos elementos. Un selector de ID como #demo debería coincidir con un único elemento, porque los valores id deben ser únicos en un documento HTML.

¿Cuándo debo usar un selector de atributos?

Use un selector de atributos cuando el propio atributo o parte de su valor identifique los elementos que necesita, como enlaces que terminan en .html, elementos con translate="no" o imágenes con un valor alt específico.

¿Cuál es la diferencia entre selectores descendientes y de hijo?

Un selector descendiente como div p coincide con elementos <p> anidados a cualquier profundidad dentro de un <div>. Un selector de hijo como div > p coincide solo con elementos <p> que son hijos directos.

¿Puedo usar selectores CSS en C# con Aspose.HTML for .NET?

Sí. Aspose.HTML for .NET admite consultas con selectores CSS mediante QuerySelector() y QuerySelectorAll(). Consulte Usar selectores CSS en C# para ver ejemplos programáticos.

Artículos relacionados

Trabajar con color HTML Primeros pasos