Changing Color of <del> Strikethrough Line

  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13503
  • Loc: Florida

Post 3+ Months Ago

Is there anything in CSS that I can use to change the color of the line <del> elements produce without needing to use a <span> inside of the <del> element ?

CSS Code: [ Select ]
del {color:red;}
del > span {color:black;}
  1. del {color:red;}
  2. del > span {color:black;}


HTML Code: [ Select ]
<del><span>Deleted Text</span></del>
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8399
  • Loc: USA

Post 3+ Months Ago

How about the 'text-decoration: linethrough' element?
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13503
  • Loc: Florida

Post 3+ Months Ago

Technically, the text-decoration property just decides whether there is a line or not. The <del> element typically implies "text-decoration:line-through;".

The "color" of the element text-decoration applies to seems to be what controls the color of the line. Meaning in order to have text that is black with a red line running through it I have to wrap that text which is inside of the <del> element with another element that I can override the color of that red <del> element with. This causes the <del> to use the red color for the line-through applied to it, and the inner element to use the color applied to it to render the text.

I'm wondering if there's some sort of "text-decoration-color" property I don't know about which would set the color of text decorations independent of the text color. :)
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8399
  • Loc: USA

Post 3+ Months Ago

I don't think there is anything you can do to separate the line from the text... or highlight the line red and the text black or vice versa without using the span tag. I just spent 30 mins trying and nothing.
  • tastysite
  • Proficient
  • Proficient
  • User avatar
  • Posts: 349
  • Loc: Brighouse, West Yorkshire, England

Post 3+ Months Ago

Can you not just add a <span> ellement and give that span a background of a 1px wide red dot and set it to repeat-x like so
Code: [ Select ]
/*CSS*/
.delcolorline {
background:url(your/red/dotimg.jpg) repeat-x;
color:#000;
}
  1. /*CSS*/
  2. .delcolorline {
  3. background:url(your/red/dotimg.jpg) repeat-x;
  4. color:#000;
  5. }

Code: [ Select ]
<!--html-->
I <span class="delcolorline">don't</span> like computers
  1. <!--html-->
  2. I <span class="delcolorline">don't</span> like computers
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8399
  • Loc: USA

Post 3+ Months Ago

The purpose of <del> is for the browser to realize that the content is being deleted, or striked out. It works good for impaired people who use the auto-reading things. At least that's my take on it.
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6230
  • Loc: South-Africa

Post 3+ Months Ago

Or maybe use jQuery to add the span for you?

JAVASCRIPT Code: [ Select ]
$(document).ready(function(){
  $('del').each(function(){
    $(this).html('<span>' + $(this).html(). '</span>');
  });
});
  1. $(document).ready(function(){
  2.   $('del').each(function(){
  3.     $(this).html('<span>' + $(this).html(). '</span>');
  4.   });
  5. });
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13503
  • Loc: Florida

Post 3+ Months Ago

jQuery might be a good idea when jQuery is already loaded. A lot of times I do.

For the sake of doing it, here's an option using regular Javascript when jQuery isn't available already. :)

JAVASCRIPT Code: [ Select ]
var dels = document.getElementsByTagName('del');
for(var i = 0; i < dels.length; i++)
{
    dels[i].innerHTML = '<span>' + dels[i].innerHTML + '</span>';
}
  1. var dels = document.getElementsByTagName('del');
  2. for(var i = 0; i < dels.length; i++)
  3. {
  4.     dels[i].innerHTML = '<span>' + dels[i].innerHTML + '</span>';
  5. }
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6230
  • Loc: South-Africa

Post 3+ Months Ago

I agree that if that is the only thing you are going to use it for, jQuery is overkill, but I use it in every site I build for quite a few things ... Rotating header images, popup calendars on date fields, colorbox, uploading of images, etc ...

Post Information

  • Total Posts in this topic: 9 posts
  • Users browsing this forum: No registered users and 59 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.