Why this site looks better in Firefox
Thumbnail
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, and other help 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 coboldinosaur.com 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.

Dzone icon Reddit icon Facebook icon RSS Icon

COBOLdinosaur


Targeted Rule Declarations in CSS


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

Member Site: http://COBOLdinosaur.com

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.

TRY THIS POPUP!

UP POPS A BOX LIKE THIS

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


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:#f0f0f0;} 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 {background-color:cyan;width:30%;margin-bottom:1px;} which will highlight every li in the tree below the container with id #list1. WITH A LITTLE STYLE!

  • 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:red;background-color:blue;} CAN HIGHLIGHT KEY WORDS

Specific Occurence Selectors

Will GIVE US THIS

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

Alternating Element Selectors

Any Sibling Selector

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:lightyellow;} they get highlighted. CLICK TO SEE THE HIGHLIGHT CHANGE

Adjacent Sibling Selectors

Complex Combined Selectors

Consider: article:target section:first-child > p:nth-of-type(even) strong {font-size:2em;color:red;}

Okay one final demo:

In the lorem paragraph that follows we will set some words big by targeting the article at the top of this stack. 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.

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.

 

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
http://tegrat.uphero.com

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
Want to talk about this page? Start a discussion OR Send a comment to Cd&
Not a member of COBOLdinosaur yet? FREE REGISTRATION HERE