Tachado sin enlace

[Agedjus]

Hola, mi consulta es la siguiente.

Tengo texto en una lista <ul><li>.........
La mayoría del texto está puesto en enlaces, mi idea es que con css se tache el texto si no hay enlace y si hay enlace no se tache.

El problema que tengo es que se tachan tengan o no tengan enlace. He intentado usar !important pero no consigo dar con la solución...

Esto es lo que llevo probado:

HTML:

Código HTML:

<ul>
       <li><a href="enlace1.html" title="">Enlace 1</a></li>
       <li><a href="enlace2.html" title="">Enlace 2</a></li>
       <li><a href="enlace3.html" title="">Enlace 3</a></li>
        .
        .
        .
</ul> 

CSS:

Código:

li{
	text-decoration:line-through
}
li a{
	text-decoration:none
}

Gracias

[cristian_cena]

podes añadir un span?

Código HTML:

<ul>
       <li><a href="enlace1.html" title="">Enlace 1</a></li>
       <li><a href="enlace2.html" title="">Enlace 2</a></li>
       <li><a href="enlace3.html" title="">Enlace 3</a></li>
       <li><span>sin enlace</span></li>
       <li><span>sin enlace</span></li>
       <li><span>sin enlace</span></li>    
</ul> ​
 

Código CSS:

ul li span{ 
    text-decoration:line-through;
}
ul li a{
    text-decoration:none;
}
 

​

[Agedjus]

Iniciado por cristian_cena

podes añadir un span?
​

Sí, de hecho podría hacerlo con span, p, div o una etiqueta que me pueda inventar como <t>.

Mi pregunta es si es posible hacerlo sin tocar el HTML... para no tener que cargarlo más...

Gracias.

[cristian_cena]

Se suponía que evitabas cargar el html, además inventar etiquetas no tiene sentido.

:not() es css3 con lo que esto implica. Desconozco de la existencia de selectores "ascendentes" o similar para emular esto con css2, ojalá alguien nos heche luz a ambos. Probá con esto:

Código HTML:

<ul>
       <li><a href="enlace1.html" title="">Enlace 1</a></li>
       <li><a href="enlace2.html" title="">Enlace 2</a></li>
       <li>sin enlace</li>
       <li>sin enlace</li>    
</ul> ​
 

Código CSS:

ul li *:not(a){
    text-decoration:line-through;
}
 

__________________________________________________ ________

No hice la prueba, pero tal vez con este otro método puedas lograr mas compatibilidad:

Código HTML:

<ul id="lista">
       <li><a href="enlace1.html" title="">Enlace 1</a></li>
       <li><a href="enlace2.html" title="">Enlace 2</a></li>
       <li><a href="enlace3.html" title="">Enlace 3</a></li>
       <li>sin enlace</li>
       <li>sin enlace</li>
       <li>sin enlace</li>    
</ul> ​
 

Código CSS:

#lista li {
text-decoration: line-through;
}
 

Usamos la librería jquery de javascript que nos permite movernos por el dom con comodidad:

Código Javascript:

$(function(){
    $("#lista").find("li").find("a").parent().css({"text-decoration" : "none"});
});
 

Saludos, espero te sirva

[Agedjus]

La primera forma con *:not(a) no me a llegado a funcionar, la segunda forma si, perfecta además.

Si realmente no se puede hacer en css2, esta sería la forma con lo que hacerlo.

Gracias de verdad!!

[cristian_cena]

A decir verdad quedé inquieto con esto de la "selección ascendente", googleando llegué a este artículo.
Tenes razón, la 1ra forma no funciona, no tenemos forma de seleccionar el "nodo de texto" del li sino que seleccionamos el "li" o el "li>a" y necesitariamos volver hacia atras en la jerarquia, del hijo al padre y creo que css3 no incorpora esto todavía.

Me alegro que te haya servido, saludos.

[kseso?]

@Cristian
Recibido el t

@Agedjus
En estos casos es conveniente consultar la documentación oficial.

text-decoration
Esta propiedad describe las decoraciones que se agregan al texto de un elemento. Si la propiedad es especificada para un elemento a nivel de bloque, afecta a todos los descendientes a nivel de línea del elemento. Si es especificada para (o afecta) un elemento a nivel de línea, afecta a todas las cajas generadas por el elemento. Si el elemento no tiene ningún contenido o ningún contenido textual (ej., el elemento IMG en HTML), las aplicaciones del usuario deben ignorar esta propiedad.

Y continúa:

El(los) color(es) requerido por la decoración del texto deberían derivar del valor de la propiedad 'color'.

Esta propiedad no es heredada, pero las cajas descendientes de una caja de bloque deberían tener en su formato la misma decoración (ej., deberían estar todas subrayadas). El color de las decoraciones debería permanecer igual aunque los elementos descendientes tuvieran diferente valores de 'color'.

T-decoration es una propiedad que afecta no a la caja en sí, sino a las cajas (generadas o contenidas) dentro de ella. A diferencia de | border | (por ejemplo).

Así que en su caso, al declarar t-decoration a un elemento de bloque (li) todo lo que declare para sus descendientes de línea (a) se sumará a la decoración declarada en li. Esto es, sus enlaces tendrán una doble decoración: tachado y no-subrayado (por defecto los enlaces tienen t-decoration: underline)

Así que, o utiliza toda una librería js o el contenido del | li | que no sea enlace lo etiqueta para poder declarar el t-decoration no al selector | li | sino a su contenido:

Código CSS:

li a {}
li span {}
 

Porque con esta propiedad, para los elementos de línea es lo mismo li * {} que li {}

@Cristian
El selector de ascendente está todavía demasiado verde. Tal es así que aún no está definida ni la grafía a utilizar ni la sintaxis.

[cristian_cena]

Gracias kseso.
Tal cual, cargar toda una librería pudiendo pudiendo añadir unos span es absurdo.
Reescribí lo anterior con javascript puro, aunque se podría pulir un poco más:

• damos: text-decoration: line-through; a todos los "ul.lista li"
• cambiamos el valor de text-decoration de los <li> padres de enlaces cuyo contenedor superior en 2 niveles (o sea el ul) tenga la clase "lista".

Código HTML:

<ul class="lista">
       <li><a href="enlace1.html">Enlace 1</a></li>
       <li><a href="enlace2.html">Enlace 2</a></li>
       <li>sin enlace</li>
       <li>sin enlace</li>
</ul>
 

Código CSS:

.lista li{
    text-decoration: line-through;
}
 

Código Javascript:

window.onload = function(){ 
    var a = document.links;                   // seleccionamos todos los enlaces del documento ...
    for(var i = 0; i < a.length; i++){        // ... y los recorremos
        var ul = a[i].parentNode.parentNode;  // seleccionamos el tag ul 
        if(ul.className == "lista"){          // si tiene la clase "lista" entonces...
            var li = a[i].parentNode;         // seleccionamos el li
            li.style.textDecoration = "none"; // ... quitamos el line-trough del li
        }
    }            
}
 

Saludos.

[furoya]

Hola todos.

¿Y tiene que ser "tachado", Agedjus?.
¿Algo así no te sirve?

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">

<style type="text/css">

li {font: 18px/120% "arial unicode ms", quivira, "ms mincho", 
"kalos greek", "dejavu sans", symbola, "ms ui gothic", "ms gothic", 
"ms pgothic", sans-serif; background-color: white; cursor: not-allowed; }

li:after {content:" ☒"; color: red; font-weight: bold; }

li > a {background-color: white; position: absolute; }

li > a:after{content:" ☑"; color: green; font-weight: bold; }

</style>
</head>
<body>

<ul>
       <li><a href="enlace1.html" title="">Enlace 1</a></li>
       <li><a href="enlace2.html" title="">Enlace 2</a></li>
       <li>sin enlace</li>
       <li>sin enlace</li>    
</ul> 

</body>
</html>

Aquí el problema es que text-decoration: none no está funcionando. Si lo ponemos al final debería limpiar todos los estilos anteriores. O si al menos existiera text-decoration: default...

[IsaBelM]

Iniciado por cristian_cena

Reescribí lo anterior con javascript puro, aunque se podría pulir un poco más:

no lo he probado pero mentalmente funciona

for (var i = 0, uls = document.querySelectorAll('.lista'); i < uls.length; i++) {
for (var j = 0, lis = uls[i].getElementsByTagName('li'); j < lis.length; j++) {
if (lis[j].childNodes[0].nodeType != 3) {
lis[j].style.textDecoration = 'none';
}
}
}

furoya +1

[kseso?]

Creo que Furoya no comprendió que el tachado se refiere a text-decoration: line-through; para el contenido de los li´s que no sean enlaces (≠<a href="#">...) y los que sí sean enlaces que no aplique text-decoration: line-through; y sí text-decoration: underline;

Y como no quiere/puede añadir una etiqueta más en los elementos que no son enlaces, pues no se puede lograr con sólo css por lo comentado en #7.

ah! vale! Que leí mal. Que es otra forma de diferenciarlos xD

[furoya]

Iniciado por IsaBelM

uls = document.querySelectorAll('.lista');
...

¿Eso existe??!!
No hay caso. Voy a tener que aprender javascript.

Iniciado por IsaBelM

furoya +1
...

¡Gracias!

Iniciado por kseso?

ah! vale! Que leí mal. Que es otra forma de diferenciarlos xD
*

(Otro que escribe más rápido de lo que lee. Ahora somos ✌ .)


Quería agregar algo. Si no hubieses puesto el escript, cristian_cena, no me hubiese animado a postear esa "alternativa". Porque Agedjus no preguntó cómo podía diferenciar los ítems que no tenían links, sino que arremetió contra los line-through; y primero había que resolverle eso.
De cualquier forma, quizá solamente le sirva el tachado de texto, y no la marca de tachado al final.

[cristian_cena]

Siempre, como dice el refrán, es mejor que sobre y no que falte, así todo tipo de alternativas y variaciones serán seguro de utilidad a agedjus. Gracias isabel también, el código a quedado mucho mejor

[cristian_cena]

Que decir, nuevamente kseso nos vuelve a sorprender . Lean esto: http://ksesocss.blogspot.com/2012/09...ecoration.html

Código HTML:

<ul>
       <li><a href="enlace1.html" title="">Enlace 1</a></li>
       <li><a href="enlace2.html" title="">Enlace 2</a></li>
       <li><a href="enlace3.html" title="">Enlace 3</a></li>
       <li><span>sin enlace</span></li>
       <li><span>sin enlace</span></li>
       <li><span>sin enlace</span></li>    
</ul>
 

Código CSS:

ul li{ 
    text-decoration:line-through;
}
ul li a{ 
    display:inline-block;
    text-decoration:none;
}
 

[fiddle]