iantearle.com

CSS Selectors

Here is a useful list of CSS selectors to be used throughout your CSS documents. We will be using many of them in the upcoming series "The Comprehensive Guide, Dreamscape".

However much you know about HTML, these selectors should be obvious, and easy to understand, within HTML markup you use "elements" (a), "attributes" (href="";) and "values" (title="";); in the same way CSS markup uses "selectors" (#title), "properties" (width:) and "values" (200px;).

So to get you started:

  • Universal Selector Selects all elements on the page (*)
  • Type Selector Selects every instance of a given element (div, p, a, etc)
  • ID Selector Selects one instance with the specified id attribute; this selector can only be used once per page (#header)
  • Class Selector Selects every instance with the specified class attribute; this can be used many times per page (.list)
  • Descendant Selector Selects all elements that are descendants of another element in the document tree (#header h1)
  • Child Selector Selects all direct children of a parent element; it will not select all descendants, only the direct children (#header>h1 will target any h1 that is a direct child of #header, even if it immediately follows the element or not)
  • Adjacent Selector Selects any sibling immediately following and element (h1+p will target the p element following an h1)
  • :first Pseudo Selector Selects only the first child, line or letter of an element (li:first-child, p:first-line and h1:first-letter)
  • Attribute Selectors Selects elements based on their attributes or attribute values (img[alt] tagets and attribute; img[src="logo.png"] targets and attribute value; img[alt~=logo] targets space-seperated instances of a value; img[alt|="logo"} targets hyphen-seperated instances of a value)
  • Combinators The characters ">", "+", and any whitspace used to construct selector combinations.

Posted On: Wednesday, April 23rd, 2008 @ 5:24 pm by Ian Tearle


0 Comments

There are no comments on this entry. You should add one below.

Leave a comment

Be kind

If you would like to discuss anything about this post, please be polite and add your comments below.


 
 

Additionally

No HTML is allowed. All links, and new lines will be automagically converted to HTML for you.
Notice to spammers, all links will be sanitized with rel="nofollow".


Contact Me

Get In Touch

If you would like to discuss anything about your next project please drop me a line.


 

Prices

Startup Websites: £19.00 per month
Commerse Websites: £39.00 per month
Native Apps: £2000

Additionally

No matter how small your project is, or if the prices above scare you, please do get in touch, I shall always listen and will advise freely alternative ideas or solutions. If you are a charity, let's talk!


Find Me On