CSS Selectors How to point to almost anything

Remember the basic style syntax

selector {! property: value;! [property: value …]!}!

With that selector-thingy, you can point to just about anything � A single element � A group of elements � All elements of a type � All descendants of an element �  Sibling elements �  Just the nth child � The active element � One we're hovering over � …

So why should we learn this stuff?

For ninja-like precision with … � CSS and styles �  jQuery

Type selectors point to all elements of a certain type

body {! font-family: Arial Sans-Serif;!}!p {! padding: .5em;!}!

Class selectors allow you to group elements any way you see fit �  .className {color: red;}

•  To apply a class in HTML <p class="fancy">!•  To apply two or more classes <p class="fancy important">!•  This will combine the characteristics of both

classes

You can combine types and classes

tr.fancy {! font-family: cursive;!}!p.headline { ! font-size: 4em;! font-family: courier Serif;!}!

Demo: formatting a basic doc Hands-on formatting a basic doc

ID selectors point to exactly one thing

#addButton {! text-align: center;!}!#cancelButton {! color: #777;!}!

Demo: selecting by ID Hands-on selecting by ID

Grouping selectors can add to the organization .headlines{!

font-family:arial;!

color:black;!

background:yellow;!

font-size:14pt;!

}!

.sublines {!

font-family:arial;!

color:black;!

background:yellow;!

font-size:12pt;!

}!

.infotext {!

font-family:arial;!

color:black;!

background:yellow;!

font-size:10pt;!

}!

.headlines, .sublines, .infotext {! font-family:arial; ! color:black; ! background:yellow;!}!!.headlines {font-size:14pt;}!.sublines {font-size:12pt;}!.infotext {font-size: 10pt;}!

Demo: grouping selectors Hands-on grouping selectors

The DOM also points to relationships between elements

� Descendants � Parent � Child �  Siblings � Ancestors

Descendant selectors

�  ancestor-sel descendant-sel � With a space between them � This will point to ALL descendants of ancestor-

sel div#sidePanel li {! color: blue;!}!

Child selectors � parent > child �  Selects only direct children div#sidePanel > p {! text-decoration: bolder;!}!

Adjacent sibling selectors

�  sel1 + sel2 � Applies to all sel2 elements that are

immediately after a sel1 element h2 + h3 {! margin: -1em;!}!

Demo: relationship selectors Hands-on relationship selectors

Remember XML attributes?

� Attributes are usually descriptors of an element.

<p class="fancy">!<a href="help.html">!<button value="Click me">!

� You can select elements by HTML attribute

Attribute selectors

�  sel[attr] � The attribute is

present img[alt]!button[value]!

•  sel[attr="value"] •  The attribute is set to

"value" img[src="help.gif"]!

Pseudo-classes for links

�  :link – The anchor is a link �  :visited – We've visited that link recently �  :hover – We're hovering over the link �  :active – We're clicking on that link right now

Other pseudo-classes

�  :first-child ◦ A child, but just the first one encountered

�  :focus ◦ The one the user clicks on or tabs into

Pseudo-elements

�  :first-line � Only the first line of a paragraph �  :first-letter �  Just the first letter �  :before and :after p:before { content:url(logo.jpg); }!

Hands-on pseudo-elements

Conclusion

� CSS selectors allow us great flexibility in pointing to elements on a page

� We can use them for styles and with jQuery � We can point to elements by id, class, type, and

DOM location

Further study

� The W3C spec on CSS selectors ◦  http://www.w3.org/TR/CSS2/selector.html

� Good tutorials on CSS selectors ◦  http://css.maxdesign.com.au/selectutorial/ ◦  http://www.echoecho.com/cssselectors.htm