CSS3 - Selectors Level 3

===

Inheritance and cascade

Most of the box-model properties
including margins, padding,
backgrounds, and borders
are not inherited.

Inherited values
have no specificity at all,
not even zero specificity.

The later a declaration appears in the style sheet or document,
the more weight it is given. Declarations that appear
in an imported style sheet are considered
to come before all declarations within the style sheet
that imports them.

If an element is matched by normal-weight styles
in both the author's style sheet and the reader's style sheet,
then the author's styles are used.

p em {color: black;} /* author's style sheet */
p em {color: yellow;} /* reader's style sheet */

Author and reader styles override the user agent's defaults.
In order of most to least weight, these are:

1. Reader !important declarations
2. Author !important declarations
3. Author normal declarations
4. Reader normal declarations
5. User agent declarations

===

W3C - All Standards and Drafts:

http://www.w3.org/TR/#tr_CSS

===

Selectors Level 3 (most current draft)

http://www.w3.org/TR/css3-selectors/

"Described in section" links relate to being at above page.

The following table summarizes the Selector syntax:

Pattern	Meaning	Described in section	First defined in CSS level
*	any element	Universal selector	2
E	an element of type E	Type selector	1
E[foo]	an E element with a "foo" attribute	Attribute selectors	2
E[foo="bar"]	an E element whose "foo" attribute value is exactly equal to "bar"	Attribute selectors	2
E[foo~="bar"]	an E element whose "foo" attribute value is a list of whitespace-separated values, one of which is exactly equal to "bar"	Attribute selectors	2
E[foo^="bar"]	an E element whose "foo" attribute value begins exactly with the string "bar"	Attribute selectors	3
E[foo$="bar"]	an E element whose "foo" attribute value ends exactly with the string "bar"	Attribute selectors	3
E[foo*="bar"]	an E element whose "foo" attribute value contains the substring "bar"	Attribute selectors	3
E[foo\|="en"]	an E element whose "foo" attribute has a hyphen-separated list of values beginning (from the left) with "en"	Attribute selectors	2
E:root	an E element, root of the document	Structural pseudo-classes	3
E:nth-child(n)	an E element, the n-th child of its parent	Structural pseudo-classes	3
E:nth-last-child(n)	an E element, the n-th child of its parent, counting from the last one	Structural pseudo-classes	3
E:nth-of-type(n)	an E element, the n-th sibling of its type	Structural pseudo-classes	3
E:nth-last-of-type(n)	an E element, the n-th sibling of its type, counting from the last one	Structural pseudo-classes	3
E:first-child	an E element, first child of its parent	Structural pseudo-classes	2
E:last-child	an E element, last child of its parent	Structural pseudo-classes	3
E:first-of-type	an E element, first sibling of its type	Structural pseudo-classes	3
E:last-of-type	an E element, last sibling of its type	Structural pseudo-classes	3
E:only-child	an E element, only child of its parent	Structural pseudo-classes	3
E:only-of-type	an E element, only sibling of its type	Structural pseudo-classes	3
E:empty	an E element that has no children (including text nodes)	Structural pseudo-classes	3
E:link E:visited	an E element being the source anchor of a hyperlink of which the target is not yet visited (:link) or already visited (:visited)	The link pseudo-classes	1
E:active E:hover E:focus	an E element during certain user actions	The user action pseudo-classes	1 and 2
E:target	an E element being the target of the referring URI	The target pseudo-class	3
E:lang(fr)	an element of type E in language "fr" (the document language specifies how language is determined)	The :lang() pseudo-class	2
E:enabled E:disabled	a user interface element E which is enabled or disabled	The UI element states pseudo-classes	3
E:checked	a user interface element E which is checked (for instance a radio-button or checkbox)	The UI element states pseudo-classes	3
E::first-line	the first formatted line of an E element	The ::first-line pseudo-element	1
E::first-letter	the first formatted letter of an E element	The ::first-letter pseudo-element	1
E::before	generated content before an E element	The ::before pseudo-element	2
E::after	generated content after an E element	The ::after pseudo-element	2
E.warning	an E element whose class is "warning" (the document language specifies how class is determined).	Class selectors	1
E#myid	an E element with ID equal to "myid".	ID selectors	1
E:not(s)	an E element that does not match simple selector s	Negation pseudo-class	3
E F	an F element descendant of an E element	Descendant combinator	1
E > F	an F element child of an E element	Child combinator	2
E + F	an F sibling element immediately preceded by a sibling E element	Adjacent sibling combinator	2
E ~ F	an F sibling element preceded by a sibling E element	General sibling combinator	3

The meaning of each selector is derived from the table above by prepending "matches" to the contents of each cell in the "Meaning" column.

#2345678911234567892123456789312345678941234567895123456789612345#

HTML
<Element-Name Attribute="Value">

CSS
selector {property: value;}
selector {rules or declaration_block}
selector {property: keyword;}
selector {property: space separated keywords;}
selector {property: comma sepatated hierarchal keywords;}

When it comes to both class and ID selectors,
what you're really doing is
selecting values of attributes.

=========

1* Inline
<p style="text-indent: 3em; font-family: monospace;"> </p>
The style element is deprecated by xhtml 1.1.
The style attribute is new to HTML,
and it can be associated with any HTML tag whatsoever,
except for those tags that are found outside of body
(head or title, for instance).

2* Document-level (embedded style sheet)
<style
type="text/css"
media="all"
>

</style>
</head>

3* External 1.4.x
<link
rel="stylesheet"
type="text/css"
href="main.css"
title="Default"
media="all"
/>

If you simply don't give a stylesheet a title,
then it becomes a "persistent style sheet"
and is always used in the display of the document.

4* @import.
Include it as portion of a page's CSS
within the <style> within <head> :
It must be placed before the other CSS rules
within the <style> tag.

@import can also be used in an external style sheet,
but the @import directive must come before any other rules
in a style sheet.

===

All 4 options combined

-->
</style>
</head>
<body>
<h1 style="font-size: 3em;">
Super Head
</h1>

=========

Attribute and Attribute/Value selectors

ele[att] - Attribute only
a[href] - Checks for presence of href attribute.
Any 'a' with 'href' as attribute.

ele[att=value]
a[href=home] - attibute 'href' with exact value 'home'.

ele[att="value"]
a[href="home.html"]
Double-quotes only required for punctuation
(.'s, spaces, etc).

~ (tilde)
ele[att~="value"]
a[alt~="thumbnail"] Tilde - match value 'thumbnail' as one
of possibly multiple values that are space separated.

|
ele[att|="value"]
a[href|="home"] Pipe (rare) - Hyphen separated list -
Value exactly or with trailing hyphen.
Typically use for Language subcode matches.

===

Attribute/ Value selectors: Prefix, Suffix,

^
ele[att^="value"]
a[href^="http://"] Value starts with prefix 'http://...'.

$
ele[att$="value"]
a[href$=".pdf"] Value ends with suffix .pdf.

*
ele[att*="value"]
div[id*="main"] Value contains case-sensitive string anywhere.
Eg. 'maintainance', 'Page-main', etc.

=========

Selectors: Descendent, Child, and Sibling.

Descendant selector.
div h1 - All h1's that are decendents of div.

>
Child selector.
div > h1 - All h1's that are direct children only of div.
(not grand-children)

+
Sibling followed immediately by 'adjacent' sibling.
h1 + p
Adjacent
h1 and p are siblings.
p immediately follows h1.

~ (tilde)
Sibling following sibling selector
h1 ~ p - General - h1 and p are siblings. All p's that follow h1.

===

CSS 3 - Selectors: pseudo-class UI

:enabled
:disabled
:checked

[HTML]
<p>
<input type="text" name="newsEmail" id="newsEmail"
class="text" disabled />
<label for="newsEmail" class="close">Email:</label>
</p>

[CSS]
input:disabled {
background: #ff0;
}
input:disabled + label {
color: #ff0;
}

===

CSS 3 - Selector - pseudo-class - Negation.

[CSS]
div.not(.caption)
div.not(.caption):not(.largeImage)
'.caption' defined as a class.

img.not([alt*="thumb"]){##}

===

CSS 3 - selector Pseudo-class - target

Styling applied if an 'id'ed element is the 'target'
of a anchor link.

Eg. <a href="#id_name">To Target</a>
...
<div id="id_name">Target</div>

===

CSS 3 Selector - Structural - Pseudo-class

:root - the <html> element in an html doc.
:empty - debugging

:first-child - first child element
regardless of element type. (CSS 2)
:last-child - last child element
regardless of element type. (CSS 3)

:only-child - child element; no siblings
of any element type.
:only-of-type - child element; no siblings
of the same element type.

(selectors below have lower specificity
than first-child and last-child)
:first-of-type - first child element of its type.
:last-of-type - last child element of its type.

===

CSS 3 - Selectors - Structural - Nth-type pseudo-class.

This CSS3 pseudo-class selector matches elements
on the basis of their positions within a parent element’s list
of child elements.

Accepts an argument, N, which can be:

- keyword
- number
- number expression of the form an+b.

:nth-child(N)
:nth-last-child(N)
:nth-of-type(N)
:nth-last-of-type(N)

Eg. - partial.
:nth-child(even)
:nth-child(odd)

Format.
:nth-child(an + b)
a - Every a-th (optional)
n - Always 'n'?? - Base value.
b - Offset. (optional) Where the count begins.

- Single item. (Eg. The seventh.)
li:nth-child(7) {
color: red;
}

nth-child

(2n)
- Every other (even)
li:nth-child(2n) {
color: red;
} - Starting at zero.
(Zero implied as default.)

(2n+1)
- Every other starting at 1 (odd).
li:nth-child(2n+1) {color: red;
}

(3n+5)
- Start with the 5th item and
every 3rd item there-after.
li:nth-child(3n+5) {color: red;}

(-2n+8)
- Start at eighth, and back
every 2nd.
li:nth-child(-2n+8) {
color: red;
}

(3n-1)
- Starting at -1; every third forward.
li:nth-child(3n-1) {
color: red;
}

(1n+4)
- 4th and each there-after.
li:nth-child(1n+4) {
color: red;
}

nth-last-child.

:nth-last-child(N) matches elements
that are followed by N-1 siblings
in the document tree.

(-n+4)
- Last four items.
li:nth-last-child(-n+4) {
color: red;
} Start from end of list and
work backwards: Starting at +4th back,
and in the (-an) opposite direction;
every nth. (Eg. n = 1n = every-one)

(1n+4)
- All except last 3.
li:nth-last-child(1n+4) {
color: red;
} Start from end of list and
work backwards: Starting at
4th from end, and every 1 in
that backwards direction.

Multiple nth's.

Both ends..
nth-..(-1n+3), nth-last-..(-1n+3)
- First three and last three.
li:nth-child(-1n+3),
li:nth-last-child(-1n+3) {
color: red;
}

Middle ground..
Daisy:Chain:
nth-..(1n+4):nth-last-..(1n+4)
- All except first three and
last three.
li:nth-child(1n+4):nth-last-child(1n+4) {
color: red;
}
...or similarly...
li:nth-last-child(1n+4):nth-child(1n+4) {
color: red;
}

===

Printer-friendly version

You are here

CSS3 - Selectors Level 3

Inheritance and cascade

W3C - All Standards and Drafts:

Search form

Site Map