ComputerSpace - i selettori CSS2 CSS3
Esempi di selecttori CSS2 e CSS3.Gli elementi di selezione nei CSS.
I selettori pseudo-class and pseudo-element nei CSS2 e CSS3.
| Selettore | Descrizione | Esempio | Cosa fà l'esempio |
|---|---|---|---|
| * selector | Selects all elements | * {font: 9pt Arial, Helvetica, sans-serif;} | Makes all elements have the specified font |
| > selector | Selects direct children of an element | div.listing > p{ margin: 0; font: 11pt "Courier New",Courier,monospace; } | Assign style to all paragraphs directly within div.listing |
| + selector | Selects the following sibling of an element | h2 + p {margin-bottom: 10pt} | make first paragraph after n H2 heading with a bottom margin of 10pt |
| [attr] selector | Selects an element with a certain attribute or attribute value | p[align=right] {float: right;border: 1px solid silver; text-align: left; padding: 15px; width:300px; } | float any text with the attribute 'align="right"' to the right in a box 300px wide |
| :before and :after | Insert content before or after an element | p.quote:before { content: open-quote; } p.quote:after { content: close-quote; } | put a quote before and after the start of any paragraph whose class is 'quote'\ |
| :first-child and :last-child | Select first and last children of an element | table td:first-child{ font-variant: small-caps; } table td:last-child{ font-variant: small-caps; } |
make the first and last column of the table render in small-caps. |
| :first-line and :first-letter | : Select the first line or the first letter of an element | p.start:first-letter { line-height: 100%; float: left; font-size: 280%; } p.start:first-line { font-variant: small-caps; } | makes a large first letter, floated to the left, and puts the fist line in small-caps |
| ~ selector | Selects the general next sibling(s) of an element | h3 ~ p {margin-left:40em} | give every paragraph following an H3 a margin of 40em |
| :first-of-type | The first sibling element of its type | td:first-of-type { font-weight:
bold; } | makes the first column in a table bold |
| :last-child | the last sibling | td:last-child { font-variant: small-caps; } | makes the last column text smallcaps |
| :last-of-type | The last sibling element of its type | td:last-of-type { font-variant: small-caps; } | makes the last column text smallcaps |
| :only-of-type | The only child of its type | td:only-of-type {font-weight: normal; font-variant: normal;} | make the font normal if there is only one column |
| :contains('text') | now withdrawn for some reason! | ||
| :empty | Empty elements (without content) | td:empty { background: silver; } | give a cell a silver background if it contains no text |
:nth-child(an+b)) | Selects elements according to a formula
specifying that the element has an+b-1 siblings before it
in the document tree | tr:nth-child(odd)
{background-color:gray;} p:nth-child(4n+1) { color: navy; } p:nth-child(4n+2) { color: green; } p:nth-child(4n+3) { color: maroon; } p:nth-child(4n+4) { color: purple; } | make the odd rows of a table have a gray background the next four examples alternate between four colours |
:nth-last-child(an+b)) | Selects elements according to a formula
specifying that the element has an+b-1 siblings after
it in the document tree | tr:nth-last-child(-n+2) {background-color:gray;} | The last two rows in the table should have a gray background |
:nth-of-type (an+b)) | Selects elements according to a formula
specifying that the element has an+b-1 siblings before
it with the same name in the document tree | img:nth-of-type(2n+1) { float:
right; } img:nth-of-type(2n) { float: left; } | float alternating images in the same document level, left and right |
:nth-last-of-type(an+b)) | Selects elements according to a formula
specifying that the element has an+b-1 siblings after
it with the same name in the document tree | tr:nth-of-type(n+2):nth-last-of-type(n+2) {background-color:silver;} | make the odd rows of a table(Make the first and last row have a background of silver |
I più visti
Le pagine più viste:
I giudizi Scolastici online
Le Verifiche Scolastiche online
Le Schede Didattiche
Le prove di ingresso
I terremoti
Gli Spazi più visti:
SchoolSpace
WellnessSpace
TripSpace
Il Grande Glossario
I giudizi Scolastici online
Le Verifiche Scolastiche online
Le Schede Didattiche
Le prove di ingresso
I terremoti
Gli Spazi più visti:
SchoolSpace
WellnessSpace
TripSpace
Il Grande Glossario
I siti collegati
PhotoFromTheWorld.com: foto da tutto il Mondo
100s.it: le classifiche i migliori 100
Sport-Team.net: sport ed eventi sportivi
www.ilDolceAmico.it: cimitero virtuale per animali
www.risus.it: ridi che ti passa
100s.it: le classifiche i migliori 100
Sport-Team.net: sport ed eventi sportivi
www.ilDolceAmico.it: cimitero virtuale per animali
www.risus.it: ridi che ti passa
Copyright © abspace - Design by alberto bellina