Dzone icon Reddit icon
Facebook icon RSS Icon Borrow my code


Feel free to borrow any code you like on this site for modification and use on your site. For support implementing just leave a comment for Cd&. You will also find Cd& providing answers and solutions on codingforums, Experts-Exchange, Digital Point, and other progressive Q/A sites where support is available. If there is a snippet you need for your web site, send a request to Cd&, and it might end up being made available on the site.

If you use code from a link would be appreciated.

If you have code on your site that might help other developers, you could add a Borrow button and join the movement to make good open source code easily accessible to all developers.

Targeted Rule Declarations in CSS

Submitted by: COBOLdinosaur on 2013-01-24 13:43:19

Member Site:

Many developers with well honed CSS skills do not understand the value of some very powerful and dynamic CSS declaration formats to do detailed target definition without using bloated and high overhead (meaning inefficient) scripting. No templates that spew all kinds of crap with jquery and make maintenance a huge effort are required. Consider the targeted alternatives.



This popup did not require any script. The dynamic display is 100% CSS using nothing but the id of an element as a target. It is 10 times more efficient than jquery because CSS is parsed during the load and we are using classes to invoke the effect. The same for the close link below.

This is the HTML markup for the structure:

Using these simple CSS rules:

So how does :target work? It is a pseudo class that matches anchors. Any element with an id can be targeted by using a hash (#) in or as an url. Normally the hash will just cause the currently targeted element to be placed at the top of the viewport. That is very helpful for long documents, and very appropriate for small screens like we have with mobile.

With CSS we can enhance the natural behavior by using :target to add some styling. If we use a global declaration like
*:target {background-color:rgb(240,240,240);}
every element that gets targeted will not only go to top, but it will also have the declared CSS properties applied. A really great effect is to highlight the content of a list by targeting its container and declaring a style for the targets descendants with:

        #list1:target li {

That will highlight every li in the tree below the container with id #list1. WITH A LITTLE STYLE!

This is the Targeted List

  • first item
  • second item
  • item3
  • item four

I repeat (just to make sure you are getting it)...there is no scripting involved!!! It is pure HTML and CSS. If you want the list marker inside the highlighting, then target the ul with #list:target ul instead of targeting the li.

NOTE: This stuff does not work in old browsers that do not support HTML5 and CSS3

Basic Use of :target

Descendent and Child Selectors

Targeting the Key Word in a Heading Anchor With a Child Selector

h4:target > span {color:white;background-color:rgb(0,0,255;} CAN HIGHLIGHT KEY WORDS

Specific Occurence Selectors

   ol:target li:nth-of-type(2) {color:rgb(0,0,255);}
   ol:target li:first-child {color:rgb(255,0,0);}
   ol:target li:last-child {color:rgb(255,165,0);}
   /* those highlight a specific item in a list

That will GIVE US THIS

  1. first item
  2. second item
  3. item3
  4. item four

Alternating Element Selectors

    #someSelect:target option:nth-of-type(odd) {
   /* this will alternate the background color 
   for options in a targeted select */

Any Sibling Selector

*:target~code {background-color:rgb(255,255,224);}
/* highlights every code segment with the 
same parent as the target

Some of this paragraph will get highlighted because the first word is done as <span id="thespan">Some</span> so the link at the end of this has href="#thespan" and with css of *:target~code {background-color:rgb(255,255,224)} they get highlighted. CLICK TO SEE THE HIGHLIGHT CHANGE

Adjacent Sibling Selectors

    p:target + ol { font-size: smaller; } 
    /* highlights the first ordered list 
    following a targeted paragraph */

Complex Combined Selectors

article:target section:first-child > p:nth-of-type(even) strong {font-size:2em;color:rgb(255,0,0);}
That is actually pretty stupid... see the final demo.

One Final Demo

In the lorem paragraph that follows we will set some words big by targeting the section at the top of this stack with just:
#targart:target p strong {font-size:2em;color:rgb(255,0,0);}
about half the typing... SO CLICK TO TRY IT

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a lacus vel nisl varius tincidunt. Curabitur rhoncus posuere risus non rutrum. Sed at viverra metus. Sed vel urna turpis, eu tempus turpis. Nulla lectus metus, molestie ac tristique ac, suscipit dapibus ipsum. Morbi vel libero id mauris tincidunt ullamcorper. Duis sit amet dapibus lorem. Aliquam eget urna eget est fringilla blandit. Vestibulum aliquam hendrerit bibendum. Sed at libero id dui bibendum fringilla.

Getting Rid of Inefficient, Crap Nesting

Yes that last one is stupid. I just did it to demonstrate that you can dynamically modify presentation right down to the individual word (even down to a character level). However it is less obtuse than the stuff we see in templates all the time like:ul li ul.someclass li ul li a:hover{...

We see it all the time in off the shelf junk because the author assumes that most of the people using their crap are not capable of writing their own customization. They load up every possible combination and then bloat thing further with jquery to apply styling.

Maybe some of them will move up to modern approaches and use ALL the possibilities instead of learning how to do a list, and some jquery so they can produce a piece of crap and call themselves a template author.

Perfect solutions are rare, and targeting is far from perfect. It has one serious problem, and that is the fact that it always postions the target at the top of the viewport; which makes the effects jumpy. In some cases you can mitigate it by including position properties in the CSS rules. There are alternatives in both CSS and javascript. There is no magic bullet that works for all cases. Sometimes a scripted function is a better alternative when you canot control position precisely enough to do the best presentation of the content.

There is no substitute for learning how to code the CSS, and there is no way to do unique high impact presentation without doing your own CSS. Bootcrap and every other CSS magic pills will give you nothing to be proud of. CSS is designed for simplicity and there is no worse thing that you can do to it the turn it into a garbage filled maze by using one of the bags of dog turds that are promoted as an alternative to doing it right. By coding your own styles and presenting your own vision you enter an internet universe where you control instead of being control by the authors of pukeware like Bootcrap.


Comment by: drifter 2013-04-02 14:33:04

Is this new? I didn't think we could comment on snippets.

There is a little Homer Simpson in all of us
big D

Comment by: Tegrat 2013-04-09 13:58:34

Cool now I get to mess with your head when a find a bug in a snippet. ;)

If God wanted us to be happy
why did He create so many assholes

Got a special script or snippet? Author Guidelines

To comment on this snippet LOGIN or REGISTER FOR FREE

Not a member of COBOLdinosaur yet? FREE registration takes less than a minute