Targeted Rule Declarations in CSS

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

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:

<article id="artlev" class="level1"><a href="#h3lev">TRY THIS!</a>
    <h3 id="h3lev" class="level2">UP POPS A BOX LIKE THIS</h3>
    <div class="level3"> Text content here.<br />
    <a href="#artlev">CLOSE</a></div></article>

Using these simple CSS rules:

.level2, .level3 
            {display:none;}
.level2:target  
            {display:block;}
.level2:target~.level3 
            {
                display:block; 
                border:2px solid blue;
                margin:auto;
                width:50%;
                border-radius:10px
            }

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

*:target {background-color:#f0f0f0;} /* applys to every target */
*:target .PostedComment {background-color:cyan;}
/* applys to every element with the named class that is a descendent of the target */
h3:target {color:red;} /* applys to every h3 when targeted */

Descendent and Child Selectors

CHILD:
ul:target  li { margin: 0 0 5px 0; } 
/* applies to all descendent li of the ul */
ul:target > li { margin: 0 0 5px 0; } 
/* applies to all direct children only of the ul */
/* ul:target > li is actually faster than ul li if you only want to target one level */

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

   ol:target li:nth-of-type(2) {color:blue;}
   ol:target li:first-child {color:red;}
   ol:target li:last-child {color:orange;}
   /* highlight a specific item in a list

Will GIVE US THIS

first item
second item
item3
item four

Alternating Element Selectors

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

Any Sibling Selector

*:target~code {background-color:lightyellow;}
/* 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:lightyellow;} 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

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