Css: Difference between revisions
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
- Specification
- W3Schools
- CSS Reference from W3Schools
- CSS Tutorial from W3Schools
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 |