September 27, 2015

CSS Selectors Reference

CSS selectors allow you to select and manipulate HTML elements. A CSS selector is the part of a CSS rule set that selects HTML elements you want to style based on their id, class, type, attribute, and more.
A good use of css selectors make coding simpler and more elegant. Here is a list of effective and highly useful css selectors:

Name Targets Example
Universal Any Element * { color : green }
Type Any element of the specified type p { color : green }
Grouping Multiple element of the specified types h1, h2, h3 { color: green }
class The name assinged to a class attribute using dot notation p.grn { color : green }
ID The name assigned to an id attribute using hash notation p#grn { color : green }
Descendant An element that is a descendant of another specified element at any level, such as child or grandchild div li { color : green }
Child An element that is the direct child descendant of another specified element div > p { color : green}
Adjacent Sibling An element that immediately follows another specified element in the document tree hierarchy h3 + p { color : green }
General Sibling All elements that share the same specified parent element h1 ~ p { color : green }
Attribute Any element that includes the specified attribute a[href] { color : green }
Attribute value An element that includes a specified attribute that has been assigned a specified value a[href="home"] { color : green }
Listed attribute value An element that includes a specified attribute and value in a space-separated list of values span[class~="grn"] { color : green }
Partial attribute value An element that includes a specified attribute whose value contains a specifed substring span[lang="es"] { color : green }

END...

No comments :

Post a Comment