Microsoft 70-480: Find elements by using CSS selectors and jQuery

Exam Objectives

Choose the correct selector to reference an element; define element, style, and attribute selectors; find elements by using pseudo-elements and pseudo-classes (for example, :before, :first-line, :first-letter, :target, :lang, :checked, :first-child)

Quick Overview of Training Materials

Programming in HTML5 with JavaScript and CSS3 - Training Guide - Chapters 4 and 6

Developing in HTML5 with JavaScript and CSS3 Jump Start - Module 2

Selectors (Mozilla Dev Net)

CSS-Tricks Almanac: Selectors

w3.org css3 Selectors Level 3 spec

MSDN - CSS Selectors

JQuery API Docs - Selectors

Selecting elements in CSS and jQuery

jQuery and CSS use "selectors" to choose elements in the DOM to apply styling to (CSS) or do any number of manipulations (jQuery). Selectors come in a number of varieties:

• Universal selector * - this selects every element on the page, and is generally considered a very expensive way of applying a style.
• Type selector - selects elements based on their tag name. Syntax for this selector is simply the name of the tag, so selecting all <div> elements is as simple as specifying div{style}
• Class selector - selects elements with a given class attribute. Specified by preceeding the class name with a period (.), so if you wanted all of the divs with class "box", you would use div.box{style}
• Id selector - selects an element with a given id attribute. Specified by preceeding the id with a hash (#), so if you want the element with id="container", you use #container{style}
• Attribute selector - selects elements based on the presence or value of an attribute. There are a number of ways to specify attribute selectors:
• *[a] - any element with attribute "a" 
• *[a='b'] - any element with attribute "a" exactly equal to "b"
• *[a*='b'] - any element with attribute "a" containing the substring "b"
• *[a^='b'] - any element with attribute "a" beginning with "b"
• *[a$='b'] - any element with attribute "a" ending with "b"
• *[a~='b'] - any element with attribute "a" containing a whitespace seperated list, with a value equal to "b"
• *[a|='b'] - any element with attribute "a" containing a hyphen-seperated list beginning with "b"

The above examples show the CSS usage, jQuery is very similar. The syntax is the same, it is placed within quotes inside the jQuery selector notation. The jQuery equivalent of the above CSS selectors is:

• $("*") - universal selector (also called "all selector")
• $("div") - type selector
• $("div.box") - class selector
• $("#container") - id selector
• $("[a='b']") - attribute selector

Selectors can be chained together using combinators. The following four combinators can be used to make more specific element selections:

• A B - descendent combinator. Selects all elements B that are decendants (children, grand-children, etc.) of elements A. So div p{style} would select all <p> elements contained, at any level, withing a <div>
• A > B - child combinator. Selects all elements B that are direct children of elements A. So div > p{style} would select <p> tags that are children of a <div>. <p> tags in a <li> that is within a <div> would not be selected.
• A + B - adjacent sibling combinator. Selects element B that is directly adjacent to element B. So in sequence <div></div><p></p><span></span>, div + p would select the <p> tag, but div + span would not select the <span> tag.
• A ~ B - general sibling combinator.  Selects element B that follows A where they share the same parent element. So in sequence <div></div><p></p><span></span>, div ~ span would select the <span> tag, but span ~ div would not select the <div> tag, because the <span> follows the <div>.

User Interface State :pseudo-classes

The following list of pseudo-classes are defined in the specification for CSS Basic User Interface. They reflect changes of state in the user interface.

• :hover - the mouse is floating over the element, but is not being clicked
• :active - the primary mouse button is being held down
• :link - links that have not yet been visited
• :visited - links that have been visited
• :focus - the focus is on the element (think of the field in a form with the cursor in it)
• :enabled - an input control that is NOT disabled. Default state of inputs.
• :disabled - an input control that IS disabled with the disabled="disabled" attribute.
• :checked - a check box or radio button that is selected.
• :indeterminate - a radio button or check box that is neither checked nor unchecked. Likely set by JS
• :default - applies to a selection element that is given the default="default" attribute.
• :valid - applies when the data in a control is valid, according to the controls validity semantics.
• :invalid - opposite of :valid (such as alpha characters in a control that should only contain numbers)
• :in-range - applies when the data in a control is in range, such as a valid value in a range input.
• :out-of-range - opposite of :in-range
• :required - a form element given the required="required" attribute.
• :optional - any form element that isn't :required.
• :read-only - any element that is not user-editable (includes most elements)
• :read-write - elements that are user editable (like text input fields)

The following JSFiddle demo uses several of the above psuedo-classes:

Structural :pseudo-classes

Structural pseudo-classes are deduced from the document tree structure.

• :root - element that is the root of the document.
• :nth-child() - element with a*n + (b-1) siblings before it. Effectively divides document into groups of a elements and selects the  bth element.(10n + 1) selects the 11th, 21st, 31st, etc elements.
• :nth-last-child() - element with a*n + (b-1) siblings before it. Essentially the same as :nth-child but working from the last element backward.
• :nth-of-type() - same as :nth-child except it only counts matching element types instead of all siblings
• :nth-last-of-type() - :nth-of-type() counting backwards from the end of the document tree
• :first-child - an element that is the first child of some other element. Same as :nth-child(1).
• :last-child - an element that is the last child of some other element. Same as :nth-last-child(1).
• :first-of-type - element that is the first element of a given type in some other element.  Same as :nth-of-type(1).
• :last-of-type - element that is the last element of a given type in some other element.   Same as :nth-last-of-type(1).
• :only-child - element is a child of an element with no other children.
• :only-of-type - element is a child of an element with no other children of that type.
• :empty - element has no children

One other pseudo-class selector that isn't strictly UI or structure related is the negation selector :not(). :not() can be used with any simple selector (except itself).

The following JSFiddle looks at most of these structural psuedo-classes:

Going beyond the tree with ::pseudo-elements

Certain "elements" of the document, such as the first letter or first line of a paragraph, are important for to designers, however these elements are not a part of the DOM structure. Enter pseudo-elements. Not only do these selectors give us the first line and first letter, we can actually append content using the ::before and ::after pseudo-classes.  Where pseudo-classes are notated with a single colon, pseudo-elements use with double colon (::).  The following pseudo-elements are available:

• ::first-line - first line of text in a block-like container.
• ::first-letter - similar to ::first-line but only applied to the first letter. The first letter can be generated by ::before.
• ::after - Generates content after the targeted element
• ::before - Generates content before the targeted element

This JSFiddle demo explores the use of these selectors and showcases how they do (and sometimes don't) work: