Cascading Style Sheets/Selectors

From WikiKnowledge

In CSS, a selector tells the browser what to format. It can simply be the name of the HTML or XML tag, or you can target class and id attributes.

[edit] Grouping Selectors

You can use the comma (,) to group selectors. For example to make all headers normal, non-bolded text you can use this rule

h1, h2, h3, h4, h5, h6 {font-weight:normal;}

[edit] Universal Selector

The universal selector is the asterisk (*). It tells the browser to target every element. For example

* {margin:0; padding:0;}

will apply a margin and padding of 0 to every element.

[edit] Descendent Selector

This selector selects an element based on what it is descendent from in the HTML/XML document. For example,

div span{color:red;}

will make all span elements red if and only if the span element is contained in a div element.

<p><span>This paragraph will be black.</span></p>
<div>
   <p><span>This paragraph will be red.</span></p>
</div>

The secound paragraph will be in red because it is in a span element which is a child of the div element, however the first paragraph will remain black because it is in a span element which is not a child of a div element.

You can combine this with the Universal Selector shown in the last section. For example

div *{color:red;}

will make every element that is descendent from a div element red, no matter what it is.

[edit] Direct Child Selector

The Direct Child Selector is similar to the Descendent Selector shown in the last section. For example

div > span{color:red;}

will make a span element red if it comes directly after a div element.

<p><span>This paragraph will be black.</span></p>
<div>
   <p><span>This paragraph will also be black.</span></p>
</div>

This time both paragraphs will remain black. The reason is because the second paragraph is is a span which is in a p element which is in the div element. To make the second paragraph red you would need to either change the rule to

div > p > span{color:red;}

or remove the p elements.

<p><span>This paragraph will be black.</span></p>
<div>
   <span>This paragraph will be red.</span>
</div>

This selector is not supported by IE 6.

[edit] ID Selector

The ID selector is the hash (#) symbol followed by the ID name. It will target all tags with that ID. For example #idname will target <div id="idname">.

In a HTML/XHTML page the id given to an element must be unique, i.e. you can only use an ID once per page. However this rule does not apply to the style sheet. A style sheet can use a reference to an ID as many times as needed.

[edit] Class Selector

The class selector is the same as the ID selector except it targets tags with the relevant class. The selector is a dot (.) symbol followed by the class name.

.bold{
    font-weight: bold;
}

This is <span class="bold">bold text</span>.

[edit] Two or more classes

You can give (X)HTML elements more then one class separated by a space. In the example below the span has been given a class of foo and bar.

<span class="foo bar">Some text</span>

You can target the above span by using either class.

[edit] Direct Adjacent Sibling Selector

This selector selects elements depending on whether they appear side by side each other in a document. For example this rule

p + div{color:red;}

will make the second paragraph red.

<p><span>This paragraph will be black.</span></p>
<div>
   <span>This paragraph will be red.</span>
</div>

This is because the p and div elements appear beside each other in the document. This selector is not supported by IE 6.

[edit] Indirect Adjacent Sibling Combinators

This is similar to the Direct Adjacent Sibling Selector, however with this selector, element only need to have the same parent, and do not need to be side by side. This selector is only supported by Safari.

[edit] Attribute Selectors

These selectors apply styles based on the presence or values of attributes in a HTML or XML tag. None of these selectors are supported by IE6.

[edit] Presence of an attribute

input[type]{border:solid 1px blue}

This rule will put a blue border around all input elements which have been given a type attribute, for example <input type="submit"> will have a blue border around it because it has a type attribute.

[edit] Value of an attribute

input[type='text']{border:solid 1px blue}

This rule will put a blue border around all input elements which have a type attribute equal to "text", for example <input type="text">

[edit] Start substring of an attribute

a[href^='http://']{color:green}

This rule will make any link starting in "http://" green.

[edit] End substring of an attribute

a[href$='.gif']{color:green}

This rule will make any link ending in ".gif" green.

[edit] Mid substring of an attribute

• CSS 3

a[href*='.php']{color:green}

This rule will make any link containing ".php" anywhere in its href attribute green.

Examples:

[edit] Navigation