Dynamic Styling?

Ok I have a feeling the solution to my problem lies with JavaScript, but maybe it doesn’t so I’ll ask here:
I have a site where a number of articles include keywords that are linked to another page called ‘Learn’ containing the definitions of the keywords as a definition list. What I would like to do is style the ‘Learn’ page definition differently from the rest of the list so that it stands out when viewed.
Can anyone tell me how I go about doing this?

Rather than just land the user on the whole page of definitions, you can give each definition on the page an ID, and include this ID in the link from the external page, so that the user is taken straight to the appropriate definition on the page (i.e. it will appear at the top of the page). This is just basic HTML.

So, for example, a link to the Learn page might look like this:

<a href="learn.html[COLOR="#FF0000"]#def45[/COLOR]">

and then the definition on the Learn page would look something like

<dt [COLOR="#FF0000"]id="def45"[/COLOR]>Keyword 45</dt>
<dd>The meaning of this word is ...</dd>

You could also style the “Keyword 45” title with some advanced CSS (I think it would work cross page, but not sure):

dt:target {color: red;}

Thanks Ralph :slight_smile:

I had already set each keyword up with an id so that is working nicely :slight_smile:

As for target, I haven’t really investigated CSS 3 yet, but I think I should! Thanks for suggesting this.


Glad I could help. :slight_smile:

:target is super easy to use, and is quite cool, I reckon. It’s no big deal if it doesn’t work in some browsers, as it’s not critical functionality, but rather an enhancement.

hmmm it worked for me in Opera and Chrome, but not in Safari and Firefox :confused: Haven’t check IE yet.

I’m using in a WordPress site; is that a problem?

No, wordpress won’t affect whether browsers support a pseudo class.

If it isn’t working in certain browsers, that means it isn’t supported.

You’ll have to find a JS solution to it, or just don’t use it at all.

Do you mean :target didn’t work? It works fine for me in those browsers (at least the latest versions). As Ryan said, it’s not a problem with WordPress, as WordPress uses the same CSS that any other site does. It’s a CSS/HTML/browser issue only.

Perhaps show us how you set it up, or post a live link that we can test. :slight_smile: