Warning: count(): Parameter must be an array or an object that implements Countable in /customers/d/f/8/sveitech.dk/httpd.www/wp-content/plugins/css-javascript-toolbox/framework/events/subjects/hook.subject.php on line 81 Warning: count(): Parameter must be an array or an object that implements Countable in /customers/d/f/8/sveitech.dk/httpd.www/wp-content/plugins/css-javascript-toolbox/framework/events/subjects/hook.subject.php on line 82 Warning: count(): Parameter must be an array or an object that implements Countable in /customers/d/f/8/sveitech.dk/httpd.www/wp-content/plugins/css-javascript-toolbox/framework/events/subjects/hook.subject.php on line 81 Warning: count(): Parameter must be an array or an object that implements Countable in /customers/d/f/8/sveitech.dk/httpd.www/wp-content/plugins/css-javascript-toolbox/framework/events/subjects/hook.subject.php on line 82 CSS Selectors | Sveitech

CSS Selectors

Element Selector

A CSS selector applies a number of rules to a DOM element. For example, the following CSS sets the background color of the body element to red:

body {
    background: red;
}

ID Selector

A DOM element can be selected by its ID, by using the # operator:

#my_div_1 {
    background: red;
}

Class Selector

A DOM element can be selected by its class, by using the . operator:

.my_class_1 {
    background: red;
}

Multiple Selectors

Say we have a number of DIVs for which we want to set the same style. We can do this in two ways:

#my_div_1 {
    background: red;
}

#my_div_2 {
    background: red;
}

or we can optimize this to the following, by using the comma operator:

#my_div_1,
#my_div_2 {
    background: red;
}

Descendant Selectors

Sometimes we only want to a apply a style, when one element is inside another.

#my_div_1 #my_div_2 {
    background: red;
}

The above CSS will cause my_div_2 elements to have a red background, only when they are inside an element named my_div_1. Notice that no comma operator is used here.

Sveistrup Technologies