CSS Study Notes— Selectors for Class/Div/Attribute

— Combinators

Also refer to: http://www.w3schools.com/css/css_combinators.asp

1.   Descendant Selector div p：matches all elementthat aredescendantsof aspecified element

2. Child Selector div> p：selects all elements that are theimmediate children of a specified element

3. Adjacent SiblingSelector div+ p：selects all elementsthat are theadjacentsiblingsofa specified element

4. General Sibling Selector div~ p：selects all elements that aresiblingsof a specified element

 

— Pseudo Classes/Elements

Also refer to: http://www.w3schools.com/css/css_pseudo_classes.asp

Selector	Example	Example description
:link	a:link	Selects all unvisited links
:visited	a:visited	Selects all visited links
:active	a:active	Selects the active link
:hover	a:hover	Selects links on mouse over
:focus	input:focus	Selects the input element which has focus
::first-letter	p::first-letter	Selects the first letter of every <p> element
::first-line	p::first-line	Selects the first line of every <p> element
:first-child	p:first-child	Selects every <p> elements that is the first child of its parent
::before	p::before	Insert content before every <p> element
::after	p::after	Insert content after every <p> element
:lang(language)	p:lang(it)	Selects every <p> element with a lang attribute value starting with "it"

 

— Attribute Selectors

Also refer to : http://www.w3schools.com/css/css_attribute_selectors.asp

1. The[attribute] selector is used to select elements with the specified attribute.

2. The [attribute=value] selector is used to select elementswith the specified attribute and value.

3. The [attribute~=value] selectoris used to selectelements with an attribute value containing aspecified word.

4. The [attribute|=value] selector is used to select elements withthe specified attribute starting withthe specified value.

5. The [attribute^=value] selectoris used to select elementswhose attribute value begins with a specified value.

6. The [attribute$=value] selector is used to select elementswhose attribute value endswith a specified value.

7. The [attribute*=value] selector is usedto select elementswhose attribute value contains a specified value.

 Borrowing from CSS 1–3, and then adding its own, jQuery offers a powerful set of tools for matching a set of elements in a document, if you would like to refer more, please also click here: http://api.jquery.com/category/selectors/