This link has been bookmarked by 69 people . It was first bookmarked on 24 Apr 2006, by mudiarto.
-
20 Dec 14
-
29 Apr 14
-
5.6 Child selectors
A child selector matches when an element is the child of some element. A child selector is made up of two or more selectors separated by ">".
Example(s):
The following rule sets the style of all P elements that are children of BODY:
body > P { line-height: 1.3 } -
5.7 Adjacent sibling selectors
Adjacent sibling selectors have the following syntax: E1 + E2, where E2 is the subject of the selector. The selector matches if E1 and E2 share the same parent in the document tree and E1 immediately precedes E2, ignoring non-element nodes (such as text nodes and comments).
Example(s):
Thus, the following rule states that when a P element immediately follows a MATH element, it should not be indented:
math + p { text-indent: 0 }The next example reduces the vertical space separating an H1 and an H2 that immediately follows it:
h1 + h2 { margin-top: -5mm }Example(s):
The following rule is similar to the one in the previous example, except that it adds a class selector. Thus, special formatting only occurs when H1 has class="opener":
h1.opener + h2 { margin-top: -5mm } -
The following selectors illustrate the differences between "=" and "~=". The first selector will match, for example, the value "copyright copyleft copyeditor" for the "rel" attribute. The second selector will only match when the "href" attribute has the value "http://www.w3.org/".
a[rel~="copyright"] a[href="http://www.w3.org/"]
-
5.11 Pseudo-classes
-
5.12 Pseudo-elements
-
5.12.1 The :first-line pseudo-element
The :first-line pseudo-element applies special styles to the contents of the first formatted line of a paragraph. For instance:
p:first-line { text-transform: uppercase } -
<P><P:first-line> This is a somewhat long HTML paragraph that </P:first-line> will be broken into several
-
-
20 Apr 14
-
14 Mar 14
-
27 Jun 13
-
09 Jun 11
-
19 Apr 10
-
18 Mar 10
-
10 Feb 10
-
14 Dec 09
-
03 Dec 09
-
24 Nov 09
-
19 Nov 09
-
28 Oct 09
-
03 Sep 09
-
24 Aug 09
-
01 Jul 09
-
EM occurs anywhere within an H1
-
-
26 Jun 09
-
*[lang=fr]and[lang=fr]are equivalent.*.warningand.warningare equivalent.*#myidand#myidare equivalent.
The universal selector, written "*", matches the name of any element type. It matches any single element in the document tree.
If the universal selector is not the only component of a simple selector, the "*" may be omitted. For example:
-
The following selector:
div * p
matches a P element that is a grandchild or later descendant of a DIV element. Note the white space on either side of the "*" is not part of the universal selector; the white space is a combinator indicating that the DIV must be the ancestor of some element, and that that element must be an ancestor of the P.
Example(s):
The selector in the following rule, which combines descendant and attribute selectors, matches any element that (1) has the "href" attribute set and (2) is inside a P that is itself inside a DIV:
div p *[href]
-
-
14 Apr 09
-
11 Mar 09
-
09 Mar 09
-
19 Feb 09
-
16 Jan 09
-
14 Jan 09
-
30 Oct 08
-
31 Jul 08
-
28 May 08
-
18 Apr 08
-
or example, the following rule matches any P element whose "class" attribute has been assigned a list of space-separated values that includes "pastoral" and "marine":
p.marine.pastoral { color: green }This rule matches when class="pastoral blue aqua marine" but does not match for class="pastoral blue"
-
-
07 Nov 07
-
a:link { color: red } /* unvisited links */ a:visited { color: blue } /* visited links */ a:hover { color: yellow } /* user hovers */ a:active { color: lime } /* active links */Note that the A:hover must be placed after the A:link and A:visited rules, since otherwise the cascading rules will hide the 'color' property of the A:hover rule. Similarly, because A:active is placed after A:hover, the active color (lime) will apply when the user both activates and hovers over the A element.
-
Pseudo-classes
-
Pseudo-elements
-
-
16 Jul 07
-
08 Apr 07
-
30 Dec 06
-
24 Dec 06
-
13 Nov 06
-
25 Aug 06
-
Matches any element.
-
Matches any E element (i.e., an element of type E).
-
Would you like to comment?
Join Diigo for a free account, or sign in if you are already a member.