Selectores de CSS – ejemplos de CSS y HTML
Para obtener más información sobre cómo utilizar los selectores CSS para navegar en un documento HTML, visite el capítulo Artículos prácticos. Los artículos de este capítulo responden preguntas populares y contienen ejemplos de C# que brindan la información necesaria sobre el uso de la biblioteca Aspose.HTML for .NET para resolver tareas específicas.
Para aprender a utilizar los métodos QuerySelector() y QuerySelectorAll() para consultar elementos DOM que coinciden con un selector CSS, consulte el artículo Cómo utilizar el selector CSS. En este artículo, descubra cómo aplicar selectores de manera efectiva para seleccionar los elementos a los que desea aplicar estilo.
En este artículo, descubra cómo aplicar selectores de manera efectiva para seleccionar los elementos a los que desea aplicar estilo. Cubrirá selectores básicos, selectores combinadores, selectores de atributos y pseudoselectores. El conocimiento de los selectores de CSS será útil tanto para los desarrolladores front-end, como para los diseñadores web y todos los desarrolladores que utilizan CSS y trabajan con documentos (X)HTML.
Selectores CSS
- Selectores básicos – Basic Selectors seleccione elementos según el nombre, identificación, clase o seleccione todos los elementos en la página web.
- Selectores de atributos – Attribute Selectors selecciona los elementos HTML que tienen un atributo específico o un atributo con un valor específico.
- Selectores de grupo – Group Selectors selecciona elementos agrupados en listas separadas por comas.
- Selectores combinadores – Combinator Selectors seleccionan elementos en función de una relación específica entre ellos. Los elementos se pueden hacer coincidir según cómo se colocan entre sí en el código de marcado o cómo están anidados en el modelo de objetos de documento.
- Pseudo selectores – Pseudo Selectors seleccionan elementos o una parte de un elemento en función de un determinado estado. Las pseudoclases se utilizan en los selectores de CSS para permitir el formato basado en información que no está contenida en el árbol del documento.
Los selectores de CSS se utilizan para seleccionar los elementos HTML a los que desea aplicar estilo y aplicar un conjunto de reglas CSS. Hay algunos tipos diferentes de selectores CSS.
Puede combinar selectores CSS de muchas maneras para lograr una gran especificidad y flexibilidad.
Selectores básicos – Basic Selectors
Los selectores CSS básicos seleccionan elementos HTML según su identificación, clase, tipo o seleccionan 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 se debe aplicar 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} HTML Example
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>
Selector de identificación
El selector de ID selecciona un elemento específico utilizando el atributo id de un elemento HTML. Se seleccionará un elemento si su atributo id coincide exactamente con el valor especificado en el Selector de ID.
CSS
1#demo {
2 background-color: #fcded4;
3 font-size: 24pt;
4}HTML Example
1<p id="demo">This paragraph has a special ID on it!</p>
2<p>This is just a regular paragraph.</p>
Selector de clases
El selector de clases relaciona elementos HTML con un atributo de class específico. Puede utilizar el atributo class para todos los elementos HTML que sean válidos en la sección body de un documento HTML, incluido el propio elemento <body>. Para seleccionar elementos con una clase específica, escriba un carácter de punto (.), seguido del nombre de la clase. Por ejemplo, si queremos que todos los elementos con una clase "main" tengan un color de fondo, color de texto y tamaño de fuente diferente, usaríamos la siguiente regla CSS:
CSS
1.main {
2 background-color: #d4e9fc;
3 color: red;
4 font-size: 16pt;
5} HTML Example
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>
Selector Universal
El Selector Universal se utiliza para seleccionar todos los elementos de las páginas web. Por ejemplo, si queremos que cada elemento tenga una alineación de texto central y un color de texto azul, usaríamos la siguiente regla CSS:
CSS
1* {
2 text-align: center;
3 color: #0154a2;
4}HTML Example
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>
Selectores de atributos – Attribute Selectors
Los selectores de atributos CSS proporcionan una forma sencilla y eficiente de aplicar estilos a elementos HTML en función de la presencia de un atributo o valor de atributo en particular. Esta es una excelente manera de diseñar elementos HTML agrupándolos según ciertos atributos, y el Selector de atributos seleccionará aquellos elementos con atributos similares. Puede crear un Selector de atributos poniendo el atributo entre corchetes:
| CSS Selector | Example | Description |
|---|---|---|
| [attribute] | [translate] | Selects all elements with an attribute name of translate. |
| [attribute=value] | [translate=no] | Selects all elements with translate="no". Represents elements with an attribute name of translate whose value is exactly no. |
| [attribute~=value] | [title~=flower] | Selects all elements with a title attribute containing the word flower. |
| [attribute|=value] | [lang|=de] | Selects all elements with a lang attribute value equal to “de” or starting with “de-”. It is often used for language subcode matches. |
| [attribute^=value] | a[href^="#"] | Selects every <a> element whose href attribute value is prefixed, begins with "#" (internal links). |
| [attribute$=value] | a[href$=".html"] | Selects every <a> element whose href attribute value is suffixed (followed) by value, ends with ".html". |
| [attribute**=*value] | a[href*=“aspose”] | Selects every <a> element whose href attribute value contains the “aspose” anywhere in the URL. |
Consideremos uno de los selectores de atributos CSS como ejemplo:
CSS
1h3[class*="1"] {
2 background-color: #b4e8fd;
3}HTML Example
1<h3 class="test-1">CSS Attribute Selector</h3>
2<h3>CSS Attribute Selector</h3>
3<h3 class="12">CSS Attribute Selector</h3>
Selectores de grupo – Group Selectors
Puede diseñar muchos selectores si lo desea. Simplemente separe los selectores 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>
Selectores combinadores – Combinator Selectors
La combinación de selectores selecciona elementos según la relación entre ellos. Hay cuatro combinadores diferentes en CSS: selector descendiente (espacio), selector secundario (>), selector de hermanos adyacentes (+) y selector de hermanos general (~):
| CSS Selector | Example | Description |
|---|---|---|
| element element | div p | The " " (space) Combinator selects all <p> elements that are descendants of the first <div> element. |
| element>element | div > span | The > Combinator selects all <span> elements where the parent is a <div> element. |
| element+element | div + p | Selects the first <p> element that is placed immediately after <div> elements. The + combinator matches the second element only if it immediately follows the first element. |
| element~element | div ~ p | The ~ Combinator selects siblings. This means that it selects every <p> element that is preceded by a <div> element. |
Consideremos uno de los selectores de combinadores CSS como ejemplo. El selector secundario (>) selecciona todos los elementos que son hijos de un elemento específico. 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>
Pseudo selectores – Pseudo Selectors
Los pseudoselectores permiten formatear elementos basándose en información distinta a la posición del elemento en el árbol del documento. Los selectores de pseudoclase y pseudoelemento están precedidos por dos puntos : y ::.
La pseudoclase se utiliza para definir un estado especial para un elemento. Por ejemplo, se puede utilizar para aplicar estilo a un elemento cuando el usuario pasa el cursor sobre él, o para aplicar estilo a enlaces visitados y no visitados de manera diferente. Un pseudoelemento CSS se utiliza para diseñar partes específicas de un elemento. Por ejemplo, p::first-letter se puede utilizar para cambiar la primera letra de un párrafo.
Consideremos uno de los selectores de pseudoelementos 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>
Aspose.HTML ofrece Aplicaciones web HTML que son una colección en línea de convertidores, fusiones, herramientas de SEO, generadores de código HTML, herramientas de URL y más gratuitos. Las aplicaciones funcionan en cualquier sistema operativo con un navegador web y no requieren ninguna instalación de software adicional. Convierta, fusione, codifique, genere código HTML, extraiga datos de la web o analice páginas web en términos de SEO fácilmente dondequiera que esté. Utilice nuestra colección de aplicaciones web HTML para realizar sus asuntos diarios y hacer que su flujo de trabajo sea fluido.