Each CSS rule has 2 fundamental parts – the selector and the declaration block.
Example: h1 {color: red; background: yellow;} – h1 is the selector, and {…} is the declarations.
A value is either a single keyword or a space-separated list of one or more keywords that was permitted for that property.
Example: p {font: medium Helvetica;}
If you use either an incorrect property or value in a declaration, the whole thing will be ignored.
CSS keywords are separated by spaces except in one instance. In the CSS property font, there is exactly one place where a forward slash (/) can be used to separate two specific keywords.
Example: h2 {font: large/150% sans-serif;}
=================================================================================================
1. Universal selector
An asterisk (*). This selector matches any element at all.
Example: * {color: red;}
=================================================================================================
2. Grouping selectors and declarations
h1, h2, h3, h4, h5, h6 {color: gray; background: white; padding: 0.5em; border: 1px solid black; font-family: Charcoal, sans-serif;}
=================================================================================================
3. Class selectors
.warning {font-style: italic;}
span.warning {font-weight: bold;}
In HTML, it’s possible to have a space-separated list of words in a single class value.
<p class=”urgent warning”>Hello</p>
The order of the words doesn’t actually matter; warning urgent would also suffice.
Say you want all elements with a class of warning to be boldface, those with a class of urgent to be italic, and those elements with both values to have a silver background. This would be written as follows:
.warning {font-weight: bold;}
.urgent {font-style: italic;}
.warning.urgent {background: silver;}
By chaining two class selectors together, you can select only those elements that have both class names, in any order.
If a multiple class selector contains a name that is not in the space-separated list, then the match will fail. Consider the following rule:
p.warning.help {background: red;}
The selector will match only those p elements with a class containing the words warning and help. Therefore, it will not match a p element with just the words warning and urgent in its class attribute. It would, however, match the following:
<p class=”urgent warning help”>Help me!</p>
Note: class and ID are case-sensitive in HTML.
=================================================================================================
4. ID selectors:
#first-para {font-weight: bold;}
This rule applies boldface text to any element whose id attribute has a value of frist-para.
Between class selector and ID selector, IDs carry more weight when you’re trying to determine which styles should be applied to a given element.
=================================================================================================
5. Attribute Selectors:
planet[moons] {font-weight: bold;}
*[title] {font-weight: bold;}
a[href][title] {font-weight: bold;}
planet[moons=”1″] {font-weight: bold;}
a[href=”http://www.w3.org/”][title=”W3C Home”] {font-size: 200%;}
Note:
ID selectors and attribute selectors that target the id attribute are not precisely the same. In other words, there is a subtle but crucial difference between h1#page-title and h1[id=”page-title”]. The Specificity is different. ID selectors have a higher specificity (more important) than attribute selectors.
- Selection based on partial attribute values:
p[class~=”warning”] {font-weight: bold;}
img[title~=”Figure”] {border: 1px solid gray;} - [foo^=”bar”]
Selects any element with an attribute foo whose value begins with “bar”. - [foo$=”bar”]
Selects any element with an attribute foo whose value ends with “bar”. - [foo*=”bar”]
Selects any element with an attribute foo whose value contains the substring “bar”. - The particular attribute selector:
*[lang|=”en”] {color: white;}
This rule will select any element whose lang attribute is equal to en or begins with en-. Therefore, the first three elements below markup would be selected, but the last two would not:
<h1 lang=”en”>Hello!</h1>
<p lang=”en-us”>Greetings!</p>
<div lang=”en-au”>G’day!</div>
<p lang=”fr”>Bonjour!</p>
<h4 lang=”cy-en”>Jrooana!</h4>
In general, the form [att|=”val”] can be used for any attribute and its values. Say you have a series of figures in an HTML document, each of which has a filename like figure-1.gif and figure-3.jpg. You can match all of these images using the following selector:
img[src|=”figure”] {border: 1px solid gray;}
=================================================================================================
6. Descendant selector (contextual selector)
Style only those em elements that are descended from h1 element
h1 em {color: gray;}
td.sidebar {background: blue;}
td.main {background: white;}
td.sidebar a:link {color: white;}
td.main a:link {color: blue;}
blockquote b, p b {color: gray;}
The child combinator (>):
h1 > strong {color: red;}
Note the difference between descendant and child.
Adjacent-sibling combinator (+) – selects an element that immediately follows another element with the same parent.
To remove the top margin from a paragraph immediately following an H1 element, write:
h1 + p {margin-top: 0;}
In addition, text content between two elements does not prevent the adjacent-sibling combinator from working.
Example: html > body table + ul{margin-top: 1.5em;}
The selector translates as “selects any ul element that immediately follows a sibling table element that is descended from a body element that is itself a child of an html element.”
===============================================================================================
7. Pseudo-Class Selectors
a:visited {color: red;}
:link
Refers to any anchor that is a hyperlink (i.e., has an href attribute) and points to an address that has not been visited.
:visited
Refers to any anchor that is a hyperlink to an already visited address.
The :link and :visited pseudo-class selectors are functionally equivalent to the body attributes link and vlink.
<body link=”purple” vlink=”silver”>
a#footer-copyright:link{font-weight: bold;}
a#footer-copyright:visited {font-weight: normal;}
Dynamic pseudo-classes
:focus
Refers to any element that currently has the input focus i.e., can accept keyboard input or be activated in some way.
:hover
Refers to any element over which the mouse pointer is placede.g., a hyperlink over which the mouse pointer is hovering.
:active
Refers to any element that has been activated by user inpute.g., a hyperlink on which a user clicks during the time the mouse button is held down.
a:link {color: navy;}
a:visited {color: gray;}
a:hover {color: red;}
a:active {color: yellow;}
Note that the dynamic pseudo-classes can be applied to any element, which is good since it’s often useful to apply dynamic styles to elements that aren’t links.
The order of the pseudo-classes is more important than it might seem at first. Recommendation is “link-visited-focus-hover-active.”
:first-child – used to select elements that are the first children of other elements.
Consider the following markup:
<div>
<p>These are the necessary steps:</p>
<ul>
<li>Insert key</li>
<li>Turn key <strong>clockwise</strong></li>
<li>Push accelerator</li>
</ul>
<p>
Do <em>not</em> push the brake at the same time as the accelerator.
</p>
</div>
In this example, the elements that are first children are the first p, the first li, and the strong and em elements. Given the following two rules:
p:first-child {font-weight: bold;} – bolds the p that is a first-child; so “These are the necessary steps” will be bolded.
li:first-child {text-transform: uppercase;} – Set the <li> that is a first-child to upper case; so “Insert key” becomes “INSERT KEY”
For situations where you want to select an element based on its language, you can use the :lang( ) pseudo-class. In terms of its matching patterns, the :lang( ) pseudo-class is exactly like the |= attribute selector. For example, to italicize any element in French, you would write:
*:lang(fr) {font-style: italic;}
The primary difference between the pseudo-selector and the attribute selector is that the language information can be derived from a number of sources, some of which are outside the element itself.
Combine Pseudo-classes
a:link:hover {color: red;}
a:visited:hover {color: maroon;}
8. Pseudo-Element Selectors:
p:first-line {color: purple;}
p:first-letter {color: red;}
In addition, all pseudo-elements must be placed at the very end of the selector in which they appear. Therefore, it would not be legal to write p:first-line em since the pseudo-element comes before the subject of the selector (the subject is the last element listed).
h2:before {content: “]]”; color: silver;} – preface every <h2> with “]]”
body:after {content: ” The End.”;} – end your document with “The End”
By Bryan Xu