Clever Geek Handbook

If condition for CSS class with section id

I am trying to change the way text is displayed when "viewed" using HTML section id code. Here is a snippet of my code:

<span class="headerqmain"><ul><li><a href="#ID001">Question</a></ul></li></span>

<section id="ID001"></section>
<span class="headerq">Question repeated</span>
<span class="answerq">Answer to the question</span>

Keep in mind that there are over 100 questions and the answers at the bottom of the page are long. This means that when someone clicks on questions, they are dropped into a list with the same questions and their answer below. (this is the faq section). But it's hard to see a forest for trees.

So my goal is to flag the clicked question + the answer that got knocked down. Possibly markings with color or large text size. Does anyone know if CSS conditions can be used in this case? Remember it all on one page.

+3


source to share


1 answer


Sample code for what you could do with your markup when switching to:

:target .headerq { /* :target would refer to #ID001 in this case */
    font-size: 1.5em;
    color: blue;
}
:target .answerq {
    color: blue;
}


http://css-tricks.com/on-target/ for more information on this technique. Also check out http://37signals.com/svn/archives/000558.php for the yellow fade method. Good improvement in this type of behavior

+1


source






More articles:


All Articles