#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2016
    Posts
    3
    Rep Power
    0

    using CSS to add/remove highlighting


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

    Code:
    <span class="highlight">off</span>
    Currently, I am using

    Code:
    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:

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

    Any ideas?
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2016
    Posts
    3
    Rep Power
    0
    https://codepen.io/anon/pen/grJjZO/?editors=1100

    was removed from my previous post - sorry.
  4. #3
  5. ~ bald headed old fart ~
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2005
    Location
    chertsey, a small town s.w. of london, england
    Posts
    363
    Rep Power
    133
    Hi there hsikkema,

    and a warm welcome to these forums.

    Try it like this......

    Code:
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
    
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
    
    <title>untitled document</title>
    
    <style media="screen">
    body {
        font: 1em/1.5em 'open sans', sans-serif;
        background: #dcc;
     }
    
    #maincontainer {
        width: 50em;
        padding: 1.25em;
        margin: auto;
        border: 0.06em solid #633;
        background: #edd;
        box-shadow: 0.5em 0.5em 0.5em rgba(50, 51, 50, 0.25);
        overflow: hidden;
     }
    
    #maincontainer input {
        display: none;
     }
    
    #indexcontainer {
        float: left;
        width: 22em;
        text-align: center;
     }
    
    #indexcontainer label {
        display: inline-block;
        padding: 1em 1.5em;
        font-weight: 600;
        color: #000;
        border: 0.12em solid transparent;
        cursor: pointer;
     }
    #indexcontainer div {
        display: none;
        padding: 1.25em 0 0;
        font-size: 0.75em;
     }
    
    #container {
        float: right;
        width: 27em;
        padding: 1em;
        border: 0.06em solid transparent;
        box-sizing: border-box;
        font-size: 0.9em;
        text-align: center;
     }
    
    #tab1:checked ~ #indexcontainer label:nth-child(1),
    #tab2:checked ~ #indexcontainer label:nth-child(2),
    #tab3:checked ~ #indexcontainer label:nth-child(3) {
        color: #000;
        border: 0.06em solid #ddd;
        border-top: 0.12em solid orange;
        border-bottom: 0.06em solid #fff;
        box-shadow: 0 -0.31em 0.62em rgba(50, 51, 50, 0.55);
     }
    
    #tab1:checked ~ #indexcontainer div:nth-child(4),
    #tab2:checked ~ #indexcontainer div:nth-child(5),
    #tab3:checked ~ #indexcontainer div:nth-child(6) {
        display: block;
     }
    
    #tab1:checked ~ #container   {
        background: #dde; 
        border-color: #988;
        box-shadow: inset 0 0 1em rgba(50, 51, 50, 0.5);
     }
    
    #tab2:checked ~ #container   {
        color: #606; 
     }
    
    #tab3:checked ~ #container  span {
        background-color: #ff9; 
     }
    </style>
    
    </head>
    <body> 
    
    <div id="maincontainer">
    
     <input id="tab1" type="radio" name="tabs">
     <input id="tab2" type="radio" name="tabs">
     <input id="tab3" type="radio" name="tabs" checked="checked">
    
    <div id="indexcontainer">
    
     <label for="tab1">A tab</label>
     <label for="tab2">B tab</label>
     <label for="tab3">Search</label>
    
    <div>
     I want to change the backgrond colour when this is showing.
    </div><div>
     I want to change the text colour when this is showing.
    </div><div>
     I want to have the words highlighted when this is showing.
    </div>
    
    <!-- #indexcontainer --></div>
    
    <div id="container">
     Dependent certainty <span>off</span> discovery him his tolerably offending. 
     Ham for attention remainder sometimes additions recommend fat our. Direction has strangers 
     now believing. Respect enjoyed <span>off</span> far exposed parlors towards. 
     Enjoyment use tolerably dependent listening men. No peculiar in handsome together unlocked do 
     by. Article concern joy anxious did picture sir her. Although desirous
    <!-- #container  --></div>
    
    <!-- #mainindexcontainer  --></div>
    
    </body>
    </html>

    coothead

    Comments on this post

    • Will-O-The-Wisp agrees : Thank you!
    ~ the original bald headed old fart ~
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2016
    Posts
    3
    Rep Power
    0
    Worked perfectly. and you even made the right side look nicer too. I had tried a javascript approach but CSS was better.

    Thanks again!
  8. #5
  9. ~ bald headed old fart ~
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2005
    Location
    chertsey, a small town s.w. of london, england
    Posts
    363
    Rep Power
    133
    Hi there hsikkema,

    No problem, you're very welcome.

    "I had tried a javascript approach but CSS was better."
    CSS is always better than javascript.

    coothead
    ~ the original bald headed old fart ~

IMN logo majestic logo threadwatch logo seochat tools logo