abspace
home
Condividi:

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.
SelettoreDescrizioneEsempioCosa fà l'esempio
* selectorSelects all elements * {font: 9pt Arial, Helvetica, sans-serif;} Makes all elements have the specified font
> selectorSelects direct children of an elementdiv.listing > p{ margin: 0;
   font: 11pt "Courier New",Courier,monospace; }
Assign style to all paragraphs directly within div.listing
+ selectorSelects the following sibling of an elementh2 + p {margin-bottom: 10pt}make first paragraph after n H2 heading with a bottom margin of 10pt
[attr] selectorSelects an element with a certain attribute or attribute valuep[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-childSelect first and last children of an elementtable 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 elementp.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
~ selectorSelects the general next sibling(s) of an elementh3 ~ p
  {margin-left:40em}
give every paragraph following an H3 a margin of 40em
:first-of-typeThe first sibling element of its type  td:first-of-type { font-weight: bold; }
makes the first column in a table bold
:last-childthe last sibling   td:last-child { font-variant: small-caps; }makes the last column text smallcaps
:last-of-typeThe last  sibling element of its type td:last-of-type
  { font-variant: small-caps; }
makes the last column text smallcaps
:only-of-typeThe 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!
:emptyEmpty 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
    

Copyright © 2009 abspace - Design by alberto bellina

Sites:
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
SchoolSpace.info