¿Hay un selector CSS para elementos que contienen cierto texto??

Los selectores CSS seleccionan los elementos HTML para aplicar propiedades de estilo. Estos se utilizan para encontrar los elementos que desea diseñar. Hay ciertas categorías de selectores CSS, como pseudo-clase, selectores simples y otros. Más específicamente, el selector de atributos es la mejor opción para seleccionar el elemento que tiene texto definitivo. El selector de combinador también se puede aplicar para este propósito.

Este artículo demostrará los siguientes métodos:

• Método 1: Selección de elemento que contiene cierto texto utilizando el selector de atributos CSS
• Método 2: Selección de elementos de selección que contiene cierto texto utilizando CSS Selector de hermanos generales

Método 1: Selección de elemento que contiene cierto texto utilizando el selector de atributos CSS

El selector de atributos CSS "CSS [atributo ~ = "valor"] selector"Puede ayudar a seleccionar el elemento con texto definitivo.

Sintaxis

Entendamos la sintaxis del selector de atributos CSS:

[Attribute-Name ~ = Value]

// declaraciones CSS

Aquí:

• "Nombre del Atributo": El atributo utilizado en el elemento HTML que tiene cierto texto se especifica aquí.
• "~": Este símbolo es un combinador general de hermanos. Se utiliza para elegir cada elemento que sea el próximo hermano de un elemento dado.
• "valor": Indica el valor del atributo.

Ejemplo

En el archivo HTML, siga las instrucciones enumeradas:

• Primero, agregue el ""Elemento y asignar una clase"Elementos-Div".
• Añade el "

  ","

  ", y "

  "Elementos dentro del Div.

• El "

  " y "

  "Ajuste los encabezados en la página. El "

  "El encabezado es ligeramente más pequeño que el"

  " elemento.

• El "

  El elemento "especifica el contenido de texto en la página:

Linuxhint

Cosas estacionarias

libro

lápiz

bloc

libro

Diseñemos el div "Elementos-Div"Y el encabezado"

"Al aplicar las propiedades de CSS como se menciona a continuación. Después de eso, veremos cómo seleccionar el "

El texto del elemento utilizando los selectores de atributos CSS.

Clase de estilo "elementos-div"

Las siguientes propiedades de CSS se aplican al "Elementos-Div" clase:

.elementos-div
Text-Align: Center;
tamaño de fuente: 17px;
Font-Family: 'Trebuchet MS';

Aquí:

• "texto alineado"Determina la alineación del texto.
• "tamaño de fuente"Ajusta el tamaño de fuente de elementos.
• "Familia tipográfica"Elija el estilo de fuente del elemento.

Elemento de estilo "H2"

"H2"También se conoce como el selector de elementos. Se usa para diseñar el "

"Elemento con las siguientes propiedades:

H2
tamaño de fuente: 30px;
Espaciado de letras: 0.2em;
Color: RGB (182, 14, 238);

En el bloque de código anterior:

• "espaciado de letras"Ajusta el espacio entre los caracteres del elemento.
• "color"Asigna el color al texto.
• "tamaño de fuenteLa propiedad se define en la sección anterior.

Seleccionar texto "Book"

Para seleccionar un texto en particular del documento, no hay un selector específico. El atributo del elemento solo necesita especificarse. Luego, con la ayuda del valor del atributo, podemos seleccionar el texto en CSS:

[estacionaria ~ = "libro"]
Color de fondo: Cornflowerblue;

Aquí, en CSS, el "color de fondo"La propiedad se ajusta al texto especificando el atributo"estacionario"Tener valor"libro".

La siguiente salida muestra que todos los elementos que tienen el valor del atributo "libro"Están diseñados:

Ahora, verifiquemos el ejemplo para aplicar estilos al "lápiz" texto. Para este propósito, el atributo estacionario con el valor "lápiz"Se obtiene en CSS a través del selector de atributos:

[estacionario ~ = lápiz]
Color de fondo: RGB (240, 168, 234);
relleno: 5px;

Aquí:

• "color de fondo"Especificó el color del fondo del elemento.
• "relleno"Asigna espacio alrededor del contenido del elemento.

Producción

Método 2: Selección de elementos de selección que contiene cierto texto utilizando CSS Selector de hermanos generales

Hay otro método para aplicar estilos en los elementos que tienen texto. Pero este método debe utilizarse cuando tenga múltiples "

"Los elementos tienen algún texto, y necesitas diseñarlos a todos a la vez. Para hacerlo, especifique el elemento que es justo antes del "

"Elementos, luego agregue el símbolo de combinador de hermanos (~) y mencione el elemento que tiene texto para aplicar estilos.

Sintaxis

Aquí, es la sintaxis del escenario mencionado anteriormente:

Elemento de primera secuencia ~ elemento de segunda secuencia
Declaraciones de CSS

Ejemplo

Agreguemos un estilo a todos " H4 ~ P
Color: carmesí;
Font-Weight: Bold;

El "H4 ~ P"Significa el"

"Elementos que son hermanos directos del"

" elemento. Se agregan las siguientes propiedades descritas:

• El "pescado"La propiedad designa el grosor de la fuente del elemento.
• El "color"La propiedad arregla el color de la fuente.

Producción

Usando estas formas, puede seleccionar elementos que tengan cierto texto para estilo en CSS.

Conclusión

Para seleccionar los elementos que contienen cierto texto, el CSS "selectores de atributos" y "Selector de combinador de hermanos generales" puede ser usado. Los selectores de atributos especifican el nombre del atributo del elemento y su valor. Luego, declare las propiedades de CSS para ello. El selector de combinador de hermanos generales selecciona cada elemento seguido por el selector anterior. Este artículo ha demostrado las formas de seleccionar elementos en CSS que tienen cierto texto.