Selector Sampler

Standard Selector

— controls style of basic html tags such as p, h1, ul, ol, etc.

p { font-size:12px;}

Multiple Selector

— allows more than one tag to share the same styles; each tag is separated by a comma.

h1, h2, h3, h4 {background-color:#669966;}

Contextual Selector

— controls styles of a selector(s) within another selector. The browser follows the style of the last selector. In the example below, i selector gets the font color red and only the i selector within the p selector gets the color; p tag is not defined with a font color red. Each selector is separated by a whitespace.

p i{color:red;}

ul ul li{color:green;}

Contextual Selector - child

— list selectors in the order they need to appear in order for the style to apply. In the sample listed below the browser must first find a <h1> tag and within that tag a <em> tag needs to be located. Contextual selectors let you fine tune your selector request so that one style can be created for an <em> tag within the <h1> tag, and another style can be created for an <em> tag that is within the <p> tag.

h1 em {color:red;}

p em {color:green;}

Adjacent Sibling Selector

— two sibling selectors must share the same parent; the second selector must follow the first selector in the markup. Selectors are separated by +. In the example below, i immediately follows p tag, so i has the color red. Both tags share the same parent, body, for example.

p + i {color:red};

Attribute Selector

— a selector that is defined with an attribute. In the example below, p tag with a class defined "hello" will have a font color red.

p[class="hello"]{color:red;}

Universal Selector

— applies to all tags that are able to inherit the defined properties. In the example below, all tags that are within the body tag will have the font color red except img tags that can't be applied with a font color.

*body{color:red;}

Grand Child

— the second tag must be the grandchild (3rd in the order) of the first tag. In the example below, i is defined with font color red. i is a child of p tag, which is a child of body tag.

body * i {color:red;}

Class

— class is custom-defined and can be used many times on a html page. A class is preceded by a period. In the example below, any tag that has a class and an attribute content will have a padding of 5 pixels around it.

.content{ padding:5px;}

Specific Class

— a class which is applied to a specific tag. In the example below, only h1 tag with a class content will have a padding of 5 pixels. <h1 class="content">

h1.content{padding:5px;}

id

— can used only once on a html page. # precedes the id's name. In the example below, a tag with id banner will have a background color of grey. <p id="banner">

#banner{background-color:grey;}

Pseudo-class

— a tag which has a specific state applies to it. List the tag, a colon, and the state

a:hover{color:red;}
a:visited{color:grey;}

Other pseudo classes

— first-child, focus are pseudo classes that are applied to block elements. In the first example below, only the first child of p tag with a div tag will have the defined property. In the second example, when a link is clicked on, the link's color turns to yellow.

div>p:first-child{border:1px solid red;}

a:focus {color:yellow;}

Pseudo Elements

— first-letter, first-line are pseudo elements that are applied to block level elements. In the first example below, the first letter within the p tag will inherit the font size. In the second example, the first line with the p tag will be bolded.

p:first-letter{font-size:12pt;}

p:first-line{font-weight:bold;}