Using CSS

• Explain basic CSS selectors
• Access element style information using JavaScript
• Set element style information using JavaScript
• Discuss using jQuery to select elements

• w3schools.com CSS tutorial
• w3schools.com CSS selector reference
• w3schools.com CSS pseudo-class selector reference
• w3schools.com CSS pseudo-element selector reference
• jQuery extended selector reference
• jQuery API for getting and setting CSS style information
• jQuery effects API

• *: selects all elements in document
• tagname: selects elements with the specified HTML tag name
• tagname1, tagname2: selects elements with either specified HTML tag name
• tagname1 tagname2: selects elements with tagname2 which are descendants of an element with tagname1
• .className: selects elements with the specified class name
• #id: selects the element with the specified id
• tagname.className: selects elements with the specified tag name and class name

• document.querySelector(cssSelector): returns the first element in a depth first tree traversal that matches the specified CSS3 selector
• element.querySelector(cssSelector): returns the first element in a depth first subtree traversal starting with element that matches the specified CSS3 selector
• document.querySelectorAll(cssSelector): returns a NodeList of all elements within the tree that match the specified CSS3 selector
• element.querySelectorAll(cssSelector): returns a NodeList of all elements descended from element that match the specified CSS3 selector
• jQuery uses the $() function which serves many purposes and returns a jQuery object which is a collection of the elements found. jQuery then provides a multitude of methods that can act upon the elements of that collection.

See the following resources for details on CSS specificity.

• Smashing Magazine, Vitaly Friedman, CSS Specificity: Things You Should Know
• CSS-Tricks, Chris Coyier, Specifics on CSS Specificity