Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

CSS3 Pseudo Selectors

No description
by

Simon Elvery

on 17 September 2010

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of CSS3 Pseudo Selectors

CSS3
Pseudo Selectors Existing: the ones we (probably) recognise :first-child
:link
:visited
:hover
:active
:focus
:lang() CSS2.1
The challenge... ...is actually using them :first-line
:first-letter

:before
:after Classes Elements What? Neither pseudo-elements nor pseudo-classes appear in the document source or document tree. CSS3
:target
:enabled
:disabled
:checked
:indeterminate
:root
:nth-child()
:nth-last-child()
:nth-of-type()
:nth-last-of-type()
:last-child
:first-of-type
:last-of-type
:only-child
:only-of-type
:empty
:not() Classes Elements References delicious.com/drzax/bnewebdesign-css3 :contains() and maybe later... No new elements!...yet.

But there is something new about them...

::first-line
::first-letter
::before
::after ::selection . Selectors which apply style to an element based on the state or context of the element Classes & Elements And you've probably already used them both. Relate to elements in the document tree, but rely on information outside the document tree. Create abstractions about the document tree "creating" elements in the tree which in reality don't exist. Dynamic pseudo-classes :target Used to select the target of the current url.
e.g. :lang() <dl id="translations">
<dt lang="en">Good evening</dt>
<dd lang="it">buonasera</dd>
<dd lang="fr">bonsoir</dd>
</dl>

:lang(fr) {color: #0000FF;}

The language attribute is underused in HTML. You're most likely familiar with these already. For the most part, these pseudo classes relate to form elements.

:enabled
:disabled
:checked

:indeterminate UI Element States Structural pseudo classes :root
:nth-child(an+b)
:nth-last-child(an+b)
:nth-of-type(an+b)
:nth-last-of-type(an+b) :first-child
:last-child
:first-of-type
:last-of-type
:only-child
:only-of-type
:empty

:contains These are the most obviously useful to me. These are the most immediately obviously useful. div p:nth-child(5) {font-weight: bold;}

make the fifth paragraph in a div bold.

div p:nth-last-child(2) {color: #FF0000;}

make the second last paragraph in a div red. n tr:nth-child(odd) {background: #CCCCCC;}
make background of odd table rows grey.

dt:nth-of-type(even) {color: #FF0000;}
make even dt elements red in color.
<dl>
<dt>Term</dt>
<dd>Definition<dd>
<dt>Term</dt>
<dd>Red definition</dd>
</dl> keywords ( odd | even ) tr:nth-child(2n+3) {background: #CCCCCC;}
give every second row starting at row three a grey background.

:nth-child(10n-1)
represents the 9th, 19th, 29th, etc, element an+b negation - :not(s) Here the 's' stands for simple selector. You can't get too tricky inside a :not()

p:not(:first-child) {color: #CCC;}
Make text in all paragraph elements which aren't the first child of their parent element grey. :target
:enabled
:disabled
:checked
:indeterminate
:root
:nth-child()
:nth-last-child()
:nth-of-type()
:nth-last-of-type()
:last-child
:first-of-type
:last-of-type
:only-child
:only-of-type
:empty
:not() No new elements!...yet.

But there is something new about them...

::first-line
::first-letter
::before
::after Classes CSS3
and maybe later... Elements :contains() :first-line
:first-letter

:before
:after CSS2.1
Elements :first-child
:link
:visited
:hover
:active
:focus
:lang() Classes ::selection http://selectivizr.com/ http://www.keithclark.co.uk/labs/ie-css3/ Simon Elvery Q elvery.net
@drzax
delicious.com/drzax

leftrightandcentre.com.au
1. Stop (automatically / fully) supporting IE6

2. Embrace Progressive Enhancement

3. Get some help "Starting with a baseline of usable functionality, then increasibng the richness of the user experience step by step by testing for support for enhancements before applying them." <a href="http://elvery.net/" title="Go home">sw'as</a> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pulvinar ipsum id sapien consectetur imperdiet. Praesent eget mauris nisl. Morbi magna mi, porttitor id consectetur et, euismod eget erat. Integer vulputate neque vel turpis porttitor condimentum. Praesent bibendum nisl at lorem venenatis nec sollicitudin leo consequat. </p> :link:visited:hover:active:focus
Full transcript