Css: Difference between revisions

From miki
Jump to navigation Jump to search
(Created page with '== References == * Specification ** [http://www.w3.org/TR/CSS2/ Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification] * W3Schools * [http://www.w3schools.com/css/css…')
 
Line 5: Line 5:
* [http://www.w3schools.com/css/css_reference.asp CSS Reference from W3Schools]
* [http://www.w3schools.com/css/css_reference.asp CSS Reference from W3Schools]
* [http://www.w3schools.com/css/default.asp CSS Tutorial from W3Schools]
* [http://www.w3schools.com/css/default.asp CSS Tutorial from W3Schools]

== Examples ==
<source lang="css">
/* install_log class for install log table */
table.install_log td:first-child
{
width:7.5em;
font-size: x-small;
}
table.install_log td:first-child:before
{
content:url(/miki/skins/monobook/bullet.gif);
margin-right:0.6em;
}
</source>


== Selectors ==
== Selectors ==
See the [http://www.w3.org/TR/CSS2/selector.html reference here].
To be completed

{| class="wikitable"
|-
!Pattern!!Meaning!!Described in section
|-
|{{nb|<source lang="css">*</source>}}
|Matches any element.
|Universal selector
|-
|{{nb|<source lang="css">E</source>}}
|Matches any E element (i.e., an element of type E).
|Type selectors
|-
|{{nb|<source lang="css">E F</source>}}
|Matches any F element that is a descendant of an E element.
|Descendant selectors
|-
|{{nb|<source lang="css">E > F</source>}}
|Matches any F element that is a child of an element E.
|Child selectors
|-
|{{nb|<source lang="css">E:first-child</source>}}
|Matches element E when E is the first child of its parent.
|The :first-child pseudo-class
|-
|{{nb|<source lang="css">
E:link
E:visited
</source>}}
|Matches element E if E is the source anchor of a hyperlink of which the target is not yet visited (:link) or already visited (:visited).
|The link pseudo-classes
|-
|{{nb|<source lang="css">
E:active
E:hover
E:focus
</source>}}
|Matches E during certain user actions.
|The dynamic pseudo-classes
|-
|{{nb|<source lang="css">E + F</source>}}
|Matches any F element immediately preceded by a sibling element E.
|Adjacent selectors
|-
|{{nb|<source lang="css">
E[foo]
E[foo="warning"]
E[foo~="warning"]
</source>}}
|Matches any E element whose "foo" attribute set OR value is exactly equal to "warning" OR value is a list of space-separated values, one of which is exactly equal to "warning".
|Attribute selectors
|-
|{{nb|<source lang="css">DIV.warning</source>}}
|Language specific. (In HTML, the same as DIV[class~="warning"].)
|Class selectors
|-
|{{nb|<source lang="css">E#myid</source>}}
|Matches any E element with ID equal to "myid".
|ID selectors
|}

Revision as of 21:29, 17 June 2010

References

Examples

/* install_log class for install log table */
table.install_log td:first-child
{
	width:7.5em;
	font-size: x-small;
}
table.install_log td:first-child:before
{
	content:url(/miki/skins/monobook/bullet.gif);
	margin-right:0.6em;
}

Selectors

See the reference here.

Pattern Meaning Described in section
*
Matches any element. Universal selector
E
Matches any E element (i.e., an element of type E). Type selectors
E F
Matches any F element that is a descendant of an E element. Descendant selectors
E > F
Matches any F element that is a child of an element E. Child selectors
E:first-child
Matches element E when E is the first child of its parent. The :first-child pseudo-class
E:link
E:visited
Matches element E if E is the source anchor of a hyperlink of which the target is not yet visited (:link) or already visited (:visited). The link pseudo-classes
E:active
E:hover
E:focus
Matches E during certain user actions. The dynamic pseudo-classes
E + F
Matches any F element immediately preceded by a sibling element E. Adjacent selectors
E[foo]
E[foo="warning"]
E[foo~="warning"]
Matches any E element whose "foo" attribute set OR value is exactly equal to "warning" OR value is a list of space-separated values, one of which is exactly equal to "warning". Attribute selectors
DIV.warning
Language specific. (In HTML, the same as DIV[class~="warning"].) Class selectors
E#myid
Matches any E element with ID equal to "myid". ID selectors