Selectors

CSS uses rules to apply styles to selected elements in your HTML documents. A rule consists of a selector and a declaration block. The declaration block is composed of pairings of properties and values.

h1 {color: red; background: yellow} In that rule, h1 is the selector. The declaration block contains two declarations, one setting the color to red, the other setting the background color to yellow.

**Types of selectors**

//Element selectors// (also called //type selectors// or //tag selectors//) apply their style to all matching elements in the page. You can create a style rule for any tag that has a visible presence on the page in a web browser, such as those listed in Table 1.
 * ** Element (Type) Selectors: **


 * **Table 1: XHTML tags and element selectors. ** ||
 * a || abbr || acronym || address || b || big ||
 * blockquote || body || button || caption || cite || code ||
 * col || colgroup || dd || <span style="font-family: Arial,Helvetica,sans-serif;">del || <span style="font-family: Arial,Helvetica,sans-serif;">dfn || <span style="font-family: Arial,Helvetica,sans-serif;">div ||
 * <span style="font-family: Arial,Helvetica,sans-serif;">dl || <span style="font-family: Arial,Helvetica,sans-serif;">dt || <span style="font-family: Arial,Helvetica,sans-serif;">em || <span style="font-family: Arial,Helvetica,sans-serif;">fieldset || <span style="font-family: Arial,Helvetica,sans-serif;">form || <span style="font-family: Arial,Helvetica,sans-serif;">h1 ||
 * <span style="font-family: Arial,Helvetica,sans-serif;">h2 || <span style="font-family: Arial,Helvetica,sans-serif;">h3 || <span style="font-family: Arial,Helvetica,sans-serif;">h4 || <span style="font-family: Arial,Helvetica,sans-serif;">h5 || <span style="font-family: Arial,Helvetica,sans-serif;">h6 || <span style="font-family: Arial,Helvetica,sans-serif;">hr ||
 * <span style="font-family: Arial,Helvetica,sans-serif;">i || <span style="font-family: Arial,Helvetica,sans-serif;">img || <span style="font-family: Arial,Helvetica,sans-serif;">input || <span style="font-family: Arial,Helvetica,sans-serif;">ins || <span style="font-family: Arial,Helvetica,sans-serif;">kbd || <span style="font-family: Arial,Helvetica,sans-serif;">label ||
 * <span style="font-family: Arial,Helvetica,sans-serif;">legend || <span style="font-family: Arial,Helvetica,sans-serif;">li || <span style="font-family: Arial,Helvetica,sans-serif;">noscript || <span style="font-family: Arial,Helvetica,sans-serif;">object || <span style="font-family: Arial,Helvetica,sans-serif;">ol || <span style="font-family: Arial,Helvetica,sans-serif;">optgroup ||
 * <span style="font-family: Arial,Helvetica,sans-serif;">option || <span style="font-family: Arial,Helvetica,sans-serif;">p || <span style="font-family: Arial,Helvetica,sans-serif;">pre || <span style="font-family: Arial,Helvetica,sans-serif;">q || <span style="font-family: Arial,Helvetica,sans-serif;">samp || <span style="font-family: Arial,Helvetica,sans-serif;">select ||
 * <span style="font-family: Arial,Helvetica,sans-serif;">small || <span style="font-family: Arial,Helvetica,sans-serif;">span || <span style="font-family: Arial,Helvetica,sans-serif;">strong || <span style="font-family: Arial,Helvetica,sans-serif;">sub || <span style="font-family: Arial,Helvetica,sans-serif;">sup || <span style="font-family: Arial,Helvetica,sans-serif;">table ||
 * <span style="font-family: Arial,Helvetica,sans-serif;">tbody || <span style="font-family: Arial,Helvetica,sans-serif;">td || <span style="font-family: Arial,Helvetica,sans-serif;">textarea || <span style="font-family: Arial,Helvetica,sans-serif;">tfoot || <span style="font-family: Arial,Helvetica,sans-serif;">th || <span style="font-family: Arial,Helvetica,sans-serif;">thead ||
 * <span style="font-family: Arial,Helvetica,sans-serif;">tr || <span style="font-family: Arial,Helvetica,sans-serif;">tt || <span style="font-family: Arial,Helvetica,sans-serif;">ul ||  ||   ||   ||

> h2, p {font-size: 1.4em;} > > .danger {font-weight: bold;} > The class is then applied to an HTML element on your page: > Be alert when you drive. > More than one class can be applied to an element. Classes can be applied more than once on any given HTML page.
 * ** Grouped selectors: ** You can select several HTML elements or classes at one time using a comma separated group of elements.
 * ** Class selectors: ** These selectors let you target items that are independent of the HTML elements on the page. **You create the names for these yourself** . A rule for a class is preceded by a period in the stylesheet.

> #lead {font-weight: bold;} > It is applied to an HTML element on your page. > What a great lead.
 * ** ID selectors: ** These selectors are also independent of any HTML element on the page and use names you create yourself. **An ID selector is used only once per page** . In the stylesheet, it is preceded by a pound sign:

> p em {color:red;} > Would apply only to em elements that were nested in (or descended from) p elements. > li.sidebar a:visited {color:blue;} > Would apply only to visited links in list items that were within an element with the class sidebar.
 * ** Descendent Selectors: ** These rules apply in certain structural or contextual circumstances based on parent-child relationships in a document. For example,

More Advanced Selectors
> img[src="img/students.jpg"] {border: solid 1px black;} > > h1 + p {margin-top:0;} > That selects only p elements that are immediately after h1 elements.
 * ** Attribute Selectors: ** These selectors allow you to choose elements based on some attribute they may have. For example, anything with the file extension .pdf or anything with a title attribute or anything with an href attribute. Here’s an example that selects something with a particular src attribute:
 * ** Adjacent Sibling Selectors: ** These select an element that //immediately// follows another element.


 * ** Pseudo-Class Selectors: ** These basically apply to the states that anchor (a) elements may have and include a:link, a:visited, a:hover, a:active, and a:focus . A few other elements can accept pseudo classes, but they are not supported in all browsers.

> p:first-letter (font-size:3em;} > p:first-line {color:purple;} > h2:before {content: "]]"; color:silver;} > label:after {content: " *";}
 * ** Pseudo-Element Selectors: ** These insert “fictional” elements into a document.