using CSS to add/remove highlighting

[hsikkema]

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;}

see
http://codepen.io/anon/pen/grJjZO?editors=1100

Any ideas?

[I.m.learning]

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.

[hsikkema]

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.”

[I.m.learning]

Yes, there is
document.getElementsByClassName(“example”);

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.

[Beverleyh]

You can do it with CSS if you change your markup (CSS for other elements needs work) https://codepen.io/anon/pen/XdwyoZ

[Author]

Posts