The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS using CSS to add/remove highlighting

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • #241811

    I have a page with some words highlighted in a span as follows

    <span class="highlight">off</span>

    Currently, I am using

    span.highlight{ background-color: #ff9;font-size:85%;border-radius: 2px;position: relative;top: -1px;}

    to highlight the text but I want the third tab (“Search”) to add in highlights and the first tab (“A tab”) to remove the highlighting. I tried the following but now highlighting even occurs:

    #tab3:not(:checked) ~ span.highlight{ background-color: #dcc;}
    #tab3:checked ~ span.highlight{ background-color: #ff9;}


    Any ideas?


    I got an idea; use “onclick.”

    ID the spans you want highlighted

    `<span id="highlight">THIS IS THE TEXT TO BE HIGHLIGHTED </span>`

    Add JavaScript function to change the background color

     function highlight() {document.getElementById('highlight').style.backgroundColor = "yellow"; }

    Then, add this to your buttons:

     <input type = "button"  onclick = "highlight();">

    You could place all this in your HTML page; or could split it up.

    I am not used to putting html code in these things and still don’t know all the tricks. It took me a month to find out people are using “blockquote” I don’t know if I should use the code span to display code, single quotes, pre, or type the ASCII code right into these pages.

    I’m using the same technique to style different entities, such as the body and text; but not highlighting. The concept’s the same.


    Thank you for the suggestion.

    I prefer to use CSS only, though I had not thought of using javascript.

    I have multiple sections that need highlighting and so I used a CLASS not an ID. As far as I know there is no “document.getElementByClass in javascript.”


    Yes, there is

    I don’t think there’s anyway else of doing it if you’re asking for text to NOT be highlighted. A straight CSS is going to highlight the text.


    You can do it with CSS if you change your markup (CSS for other elements needs work)

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.