Regla CSS basada en el contenido

Me gustaría aplicar un estilo diferente a todos los anclajes que contienen una palabra específica. ¿Se puede hacer en CSS puro? Está bien si es solo CSS3.Regla CSS basada en el contenido

Fuente

2009-11-22 Tamás Szelei

Nº :contains una vez que se propuso, pero no está en el Borrador de Trabajo actual de CSS3 selectores .

Se necesitaría algo de JavaScript, por ejemplo:

for (var i= document.links.length; i-->0;) 
    if (/\bSpecificWord\b/i.test(document.links[i].innerHTML) 
     document.links[i].style.color= 'red';

Fuente

2009-11-22 01:24:52 bobince

Espero que hayan solucionado este problema por ahora. Parece obvio que el diseño de un elemento por las palabras en su contenido es un problema extremadamente común. –

sí, hay un selector :contains en CSS3.

li:contains("special"){text-style: italic;}

se menciona aproximadamente 1/2 abajo en esta página here

Esto es demasiado ... something you can also do with jQuery

Fuente

2009-11-22 00:51:47

Interesante, pero es solo para medios estáticos "Este selector es solo para medios estáticos (es decir, impresión y no visualización en pantalla)." – Joel

ah sí, yo no entendí ese matiz ... puedo ver por qué tiene sentido, sin embargo (tal vez). gracias por detectar que –

El selector ': contains' no entró en las especificaciones posteriores. – idmean

Puede match attribute values though. Si usa atributos de datos personalizados, puede obtener lo que desea.

Fuente

2009-12-19 03:34:02

Esta respuesta funciona bien en cromo. 'td [data-carrier =" Verizon "] {color: # F00; } 'Resultados en celdas' td' con el atributo de valor 'data-carrier'' Verizon' que les da el color 'Red'. –

Utilice la Hitch que es una pequeña biblioteca JS. Puede aplicar fácilmente el estilo basado en contenido a cualquier elemento. Tiene muchas opciones y es ideal para un estilo condicional.

Fuente

2014-01-02 03:34:09 Enes

@bobince me ayude y me escribió este código:

var x = document.getElementsByTagName('TD'); 
for (var i= x.length; i-->0;) 
    if (x[i].innerHTML=='closed') 
     x[i].parentNode.style.background= '#FEE';

Si el contenido de algunas TD es 'cerrado', entonces el color de fondo de la TR será identificada con el color rojo claro.

Fuente

2015-12-24 07:22:18

No creo que acceder a una lista de nodos mediante la notación de corchetes sea estándar. – Carcigenicate

Respuesta

Cuestiones relacionadas