Regla CSS basada en el contenido [duplicar]


Esta pregunta ya tiene una respuesta aquí:

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.

 28
Author: Nakilon, 2009-11-22

5 answers

No. :contains se propuso una vez, pero no está en el Borrador de Trabajo actual de los Selectores CSS3.

Necesitará 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';
 29
Author: bobince,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2009-11-22 01:24:52

Puede hacer coincidir los valores de los atributos a través de. Si utiliza atributos de datos personalizados, puede obtener lo que desea.

 15
Author: Divya Manian,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2009-12-19 03:34:02

Sí hay un selector :contains en CSS3.

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

Se menciona aproximadamente 1/2 en esta página aquí

Esto es algo que también puedes hacer con jQuery...

 5
Author: Scott Evernden,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2009-11-22 00:51:47

Use el 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.

 0
Author: Enes,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-01-02 03:34:09

@bobince ayúdame y escribí 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 algún TD es 'cerrado', entonces el color de fondo del TR se identificará con el color rojo claro.

 0
Author: lynx_74,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-12-24 07:22:18