Basic CSS Selectors
ABC's of JQuery selecting
$() v. native js
More interesting CSS Selectors
including:
- Attribute Selectors
- Structural Selectors
- UI Selectors
JQuery Selectors that aren't part of CSS
Tips & Tricks
A little bit about HTML5 new input types and attributes.

Basic CSS Selectors

<ul>
<li id="myID" class="myClass">blah</li>
<li>splat</li>
</ul>

li	tag name	$('li')
#myID	ID	$('#myID')
.myClass	class	$('.myClass')

Relational Selectors CSS test jQuery test

<ul>
  <li>bleep</li>
  <li>
      <ol>
        <li>fizbot</li>
        <li>dingfoo</li>
      </ol>
    </li>	
  <li class="myClass">blah</li>
  <li>splat</li>
  <li>bloak</li>
</ul>

ul li: descendant selector
matches nested <li>s
ol > li: child selector
matches <li>s in <ol> but not nested <ul>
no need to use $('ul').children('li')
li.myClass + li: adjacent sibling
matches #4 only
NEW
li.myClass ~ li: general sibling selector
matches #4 and later, but not nested.

Ancestor Selector (jQuery Only) CSS Fail jQuery test

<li>This has a <span>Span</span><p>
<li>This does not</li>

li:has(span): E:has(F) Matches all ancestoral elements with tag name E that have at least one descendant matching F.

jQuery selector. Not a CSS Selector. There are more jQuery selectors below.

ABC's of jQuery SelectorsCSS test jQuery test

jQuery supports nearly all CSS 1-3 selectors
As long as JS is enabled, you can use jQuery to equalizes IE6-8, in terms of selectors, with the rest of the web.
Almost any CSS selector can be wrapped in quotes & parentheses, to match elements (so we can to apply jQuery methods)
You can even use plugins to make IE understand the selectors in your stylesheet

$('CSS Selector(s)')
$('li.myClass').text('blah');
$('li:first-of-type').text('blah');

Native JavaScript

<ul>
<li id="myID" class="myClass">blah</li>
<li>splat</li>
</ul>

li	$('li')	getElementsByTagName('li')
#myID	$('#myID')	getElementById('myID')
.myClass	$('.myClass')	getElementsByClassName('myClass')	IE9

Native JavaScript

<ul>
<li id="myID" class="myClass">blah</li>
<li>splat</li>
</ul>

li	$('li')	querySelectorAll('li')
#myID	$('#myID')	querySelector('#myID')
.myClass	$('.myClass')	querySelectorAll('.myClass')

Do not include jQuery
just for $(selector)
when native JavaScript will work

$('li:first-of-type')[0].text('blah');

same as

document.querySelector('li:first-of-type').innerHTML = 'blah';

Attribute Selectors

element[attribute]: Select elements containing the named attribute

   img[alt] {} 
selects: 
   <img src="image.jpg" alt="accessible">    
does not select: 
   <img src="image.jpg" title="inaccessible">


   form [type] {} 
selects: 
   <input type=date> 
does not select:
   <select>

IE6 sucks
IE7 has some support
jQuery makes it all work!

Attribute Selectors CSS test jQuery test

E[attr]

Element E that has the attribute attr with any value.

E[attr="val"]

Element E that has the attribute attr with the exact, case-insensitive, value val.

E[attr|=val]

Element E whose attribute attr has a value val or begins with val- ("val" plus "-").

p[lang|="en"]{/*    <p lang="en-us">  <p lang="en-uk"> */ }

E[attr~=val]

Element E whose attribrute attr has within its value the space-separated full word val.

a[title~=more] {/* <a title="want more info about this?">}

Attribute Selectors (not IE6/IE7) CSS test jQuery test

E[attr^=val]

Element E whose attribute attr starts with the value val.

a[href^=http]:after {content: " (" attr(href) ")";}
a[href^=mailto] {background-image: url(emailicon.gif);}

E[attr$=val]

Element E whose attribute attr ends in val .

a[href$=pdf] {background-image: url(pdficon.gif);}
a[href$=pdf]:after {content: " (PDF)";}

E[attr*=val]

Element E whose attribute attr matches val anywhere within the attribute. Similar to E[attr~=val] above, except the val can be part of a word.

Note: Multiple attributes work! a[title][href]

Structural SelectorsCSS test jQuery test

:first-child
:last-child
:nth-child(exp)
:nth-last-child(exp)
:first-of-type
:last-of-type
:nth-of-type(exp)
:nth-last-of-type(exp)
:only-child
:only-of-type
:not(exp)

First, Last & Only CSS test jQuery test

<ul>
  <li>bleep</li>	
  <li><em>blah</em></li>
  <li>splat</li>
  <li>bloak</li>
</ul>

:first-child
:last-child
:first-of-type
:last-of-type
:only-child
:only-of-type

IE6 sucks. So does IE7 and IE8
jQuery solves these oddly

First, Last & Only

:first-child: Works as is in CSS
:last-child: Works as is in CSS
:first-of-type: :first is slightly different
Same as :eq(0)
:last-of-type: :last is last of all, not per parent
:only-child: Works as is in CSS
:only-of-type: Maybe use :first:last instead

-of-types support NOT added by jQuery

nth-of-type CSS test jQuery test

<ul>
  <li>bleep</li>	
  <li>blah</li>
  <li>splat</li>
  <li>bloak</li>
  <li>grolt</li>
</ul>

li:nth-child(4){font-weight: bold;}
li:nth-last-child(even) { color:red;}
li:nth-of-type(2n+3){text-decoration: underline;}
li:nth-last-of-type(4n){ font-style: italic;}

Exclusions CSS test jQuery test

:not(exp)

a:not([href^=http])
li:not(:last-of-type)
li:not(:nth-of-type(3))
li:not(.myClass)

jQuery Only Structural Selectors

E:first: The first element on the page matching E.
equal to E:first-of-type, E:nth-of-type(1), and jQuery's E:eq(0)
E:last: The last element on the page matching E.
equal to E:last-of-type
E:even: Every other E starting with #2
equal to E:nth-of-type(even)
E:odd: Every other E starting with #1
equal to E:nth-of-type(odd)
E:eq(Y): n-th of elements matching E. Starts at 0
Similar to :nth-of-type(Y)
but counting starts at 0
E:gt(Y): Every element E appearearing after E:(Y)
similar to E:nth-of-type(n+Y) or E:nth-of-type(Y)~E
but counting starts at 0, or
E:eq(Y)~E
E:lt(Y): Every element E appearearing Before E:eq(Y)
similar to E:not(E:nth-of-type(n+Y))
counting starts at 0

:first-child, :last-child, :only-child, :nth-child supported in both jQuery and CSS

More jQuery Selectors

E:has(F): E that has at least one descendant matching F
No CSS equivalent
E:contains(string): E containing case sensitive string as child
No CSS equivalent
E:parent: E that is parent of another element, including text nodes.
use E:not(:empty) in CSS
E:empty: Exists in CSS. Opposite of :parent
:header: Same as h1, h2, h3, h4, h5, h6 {} in CSS

Selectivzr

www.selectivizr.com

SuperSelectors

http://skulljackpot.com/2009/04/19/super-css-selector-support-with-jquery/

UI Selectors (CSS &JQ)

:checked: radio buttons and checkboxes that are checked.
:disabled: disabled with attribute or via javascript
:enabled: Selects E that are NOT disabled
$('input:not(:disabled)')
button:enabled {}
:selected: Selects all elements that are selected.

Note: <input type="hidden"> can neither be enabled or disabled.

$('input:checkbox').addClass('checkbox') to stylize IE's
Checked checkboxes? $('input:checkbox:checked')
Unchecked checkboxes? $('input:checkbox:not(:checked)') or $('input:checkbox:checked=false')

UI Selectors (jQ only)

Selects element based on state and/or attribute, but does not change the state

E:animated: E currently being animated with jQuery (jQ)
E:hidden: selects all hidden elements (jQ)
E:visible: selects all visible elements (jQ)

:hidden v. :visible

:hidden includes:

display: none.
<input type="hidden">
{width: 0; height: 0}
parent hidden

:visible includes all visible elements AND:

visibility: hidden
opacity: 0
elements animating to hide or show.

During animations that hide an element, the element :visible until the end of the animation.
During animations to show an element, the element is :visible during the entire animation.
Items currently animating their visibility (such as with .hide(), .show() or .slideUp() ) are :visible until the animation end.

Definitely add specificity for :hidden, since $('*:hidden') will grab <option>, <script>, <title>, etc.

<input> pseudoclasses (jQ only)

:button: <button> + <input type="button">
:checkbox: <input type="checkbox"> $('[type=checkbox]')
:file: <input type="file"/> $('[type=file]')
:image: <input type="image"/>$('[type=image]')
:password: <input type="password"/>$('[type=password]')
:radio: <input type="radio"/>$('[type=radio]')
:reset: <input type="reset"/>$('[type=reset]')
:submit: <input type="submit"/>$('[type=submit]')*
:text: <input type="text"/>$('[type=text]')
:hidden: <input type="hidden"/> $('[type=hidden]')
// QUIRKY: so specify input:hidden

<input> tidbits

pseudo-class selectors ( begin with ":") imply the universal selector ("*") . Recommend preceding with selector so "*" is not implied.

remember submit event is applied to <form> not to <button> or <input type=submit>

:input <input> + other form controls, $('input, textarea, button, select')
does not include meter, progress or output

New <input> types?

color
date
datetime
datetime-local
email
month
number
range
search
tel
time
url
week

The 13 new input types are NOT supported with :color, etc, but [type=color] work fine.

CSS Pseudo classes & elements

Work in CSS, Not in jQuery

E:link
E:visited: No longer fully supported in all browsers for security
E:active
E:hover
E:focus
E:target: E within or as the target of the URI
E::first-line: E's first line
E::first-letter: E's first letter
E::selection: portion of E element currently selected/highlighted by user
E::before: generated content before E
E::after: generated content after E

CSS Form PseudoClasses

:default
:valid
:invalid
:in-range
:out-of-range
:required: $(''form [required]')
:optional: $(''form :not([required])')
:read-only: $(''form [readonly]')
:read-write: $('form :not([readonly])')

jQuery & CSS3 Selectors

Table of Contents

Basic CSS Selectors

Relational Selectors CSS test jQuery test

Ancestor Selector (jQuery Only) CSS Fail jQuery test

ABC's of jQuery SelectorsCSS test jQuery test

Native JavaScript

Native JavaScript

Do not include jQuery
just for $(selector)
when native JavaScript will work

CSS Selectors

Selector Categories

Attribute Selectors

Attribute Selectors CSS test jQuery test

Attribute Selectors (not IE6/IE7) CSS test jQuery test

CSS Specificity

Structural SelectorsCSS test jQuery test

First, Last & Only CSS test jQuery test

First, Last & Only

nth-of-type CSS test jQuery test

nth-of-type

Exclusions CSS test jQuery test

jQuery Only Structural Selectors

More jQuery Selectors

Selectivzr

SuperSelectors

UI Selectors (CSS &JQ)

UI Selectors (jQ only)

:hidden v. :visible

<input> pseudoclasses (jQ only)

<input> tidbits

New <input> types?

New HTML form element attributes

CSS Pseudo classes & elements

CSS Form PseudoClasses

Thank You

jQuery & CSS3 Selectors

Table of Contents

Basic CSS Selectors

Relational Selectors CSS testjQuery test

Ancestor Selector (jQuery Only) CSS FailjQuery test

ABC's of jQuery SelectorsCSS testjQuery test

Native JavaScript

Native JavaScript

Do not include jQuery just for $(selector) when native JavaScript will work

CSS Selectors

Selector Categories

Attribute Selectors

Attribute Selectors CSS testjQuery test

Attribute Selectors (not IE6/IE7) CSS testjQuery test

CSS Specificity

Structural SelectorsCSS testjQuery test

First, Last & Only CSS testjQuery test

First, Last & Only

nth-of-type CSS testjQuery test

nth-of-type

Exclusions CSS testjQuery test

jQuery Only Structural Selectors

More jQuery Selectors

Selectivzr

SuperSelectors

UI Selectors (CSS &JQ)

UI Selectors (jQ only)

:hidden v. :visible

<input> pseudoclasses (jQ only)

<input> tidbits

New <input> types?

New HTML form element attributes

CSS Pseudo classes & elements

CSS Form PseudoClasses

Thank You

Relational Selectors CSS test jQuery test

Ancestor Selector (jQuery Only) CSS Fail jQuery test

ABC's of jQuery SelectorsCSS test jQuery test

Do not include jQuery
just for $(selector)
when native JavaScript will work

Attribute Selectors CSS test jQuery test

Attribute Selectors (not IE6/IE7) CSS test jQuery test

Structural SelectorsCSS test jQuery test

First, Last & Only CSS test jQuery test

nth-of-type CSS test jQuery test

Exclusions CSS test jQuery test