Web Programming Style - Useful Cases of CSS (2) CSS3 Selectors

CSS3 supports powerful selector to retrieve specific elements.properties and set values for flexible rendering. There are four different combinators for CSS selectors in CSS3:



Descendant Selector matches all element that are descendants of a specified element, e.g. div p{background-color:yellow;} selects all <p> elements inside <div> elements.
Child Selector selects all elements that are the immediate children of a specified element, e.g. div>p{background-color:yellow;} selects all <p> elements that are immediate children of a <div> element.
Adjacent Sibling Selector selects all elements that are the adjacent siblings of a specified element, e.g. div+p{background-color:yellow;}. "adjacent" means "immediately following", the <p> element immediately after <div> elements.
General Sibling Selector selects all elements that are siblings of a specified element, e.g. div~p{background-color:yellow;} selects all <p> elements that are siblings of <div> elements.

All CSS Pseudo Classes/Elements provide useful selectors for rendering well-designed text layouts and formats.

Selector	Example	Example description
:link	a:link	Selects all unvisited links
:visited	a:visited	Selects all visited links
:active	a:active	Selects the active link
:hover	a:hover	Selects links on mouse over
:focus	input:focus	Selects the input element which has focus
::first-letter	p::first-letter	Selects the first letter of every <p> element
::first-line	p::first-line	Selects the first line of every <p> element
:first-child	p:first-child	Selects every <p> elements that is the first child of its parent
::before	p::before	Insert content before every <p> element
::after	p::after	Insert content after every <p> element
:lang(language)	p:lang(it)	Selects every <p> element with a lang attribute value starting with "it"

For example, if "p.first::first-letter {font-size: 3em;}" is defined in .css file, "<p class="first" />" will emphasize the first letter of the paragraph with 3em. CSS style "p::before {content: "I say: ";}" will add "I say: " before every paragraph sentence, so that "I" will be3em emphasized by p.first::first-letter.

CSS Image Gallery

Add a description of the image here

Add a description of the image here

Add a description of the image here

Add a description of the image here

Source code is here. Explain important source codes with comments.
div.img {margin: 5px;  padding: 5px;  border: 1px solid #0000ff;  height: auto; width: auto; float: left; text-align: center;} /* image thumbnail is a char aligned center */
/* for <div> and next <img> */
div.img img {display: inline;  margin: 5px;  border: 1px solid #ffffff;}
/* for <div> and next <img> for the effect of mouse over */
div.img a:hover img {border: 1px solid #0000ff;}
div.desc {text-align: center;  font-weight: normal;  width: 120px;  margin: 5px;}

For example, the first image thumbnail's code:
<div class="img">
 <a target="_blank" href="klematis_big.htm"><img src="klematis_small.jpg" alt="Klematis" width="110" height="90"></a>
 <div class="desc">Add a description of the image here</div>
</div>

Can you enhance the image gallery with following functions:

• "On click" the "desc" description text, the text becomes invisible with text cursor.
• Make the "desc" content editable.
• "On mouse leave" the "desc", check if the text was modified, then write to the database if modified.

CSS Opacity can be used to make image normal or transparent for highlighting the selected image.
img {opacity: 0.4; filter: alpha(opacity=40); /* For IE8 and earlier */}
img:hover {opacity: 1.0; filter: alpha(opacity=100); /* For IE8 and earlier */}

CSS Image Sprites
An image sprite is a collection of images put into a single image to avoid taking a long time to load every images (e.g. in the menu list) and generates multiple server requests. Using image sprites will reduce the number of server requests and save bandwidth.

http://www.w3schools.com/css/img_navsprites_hover.gif

See the sample code.



CSS [attribute] Selector
The [attribute] selector is used to select elements with the specified attribute. For example, the following code select <a> elements with [target] attribute specified as the <a>'s attribute.
a[target] {background-color:yellow;}
The following <a> will be selected and rendered with yellow bgcolor.
<a href="http://www.disney.com" target="_blank">disney.com</a>

The [attribute~=value] selector is used to select elements with an attribute value containing a specified word.
[title~=flower] {border:5px solid yellow;}
will affect the HTML code:
<img src="klematis.jpg" title="klematis flower" width="150" height="113">

The [attribute|=value] selector is used to select elements with the specified attribute starting with the specified value. Note: The value has to be a whole word, either alone, like class="top", or followed by a hyphen( - ), like class="top-text"!
[class|="top"]{background:yellow;}
will affect the HTML code,
<h1 class="top-header">Welcome</h1>
but not affect the HTML code,
<p class="topcontent">Are you learning CSS?</p>

This line of HTML code will be affected by the [attribute^=value] selector, which is used to select elements whose attribute value begins with a specified value.

[class^="top"]{background:yellow;}