Learning web technologies one class at a time

CSS Selector Types

A CSS selector is the part of a CSS rule set that actually selects the content you want to style. Let’s look at all the different kinds of selectors available.

The universal selector works like a wild card character, selecting all elements on a page.

CSS

1

2

3

4

5

* {

color:green;

font-size:20px;

line-height:25px;

}

The three lines of code inside the curly braces (color, font-size, and line-height) will apply to all elements on the HTML page. The universal selector is declared using an asterisk.

The type selector matches one or more HTML elements of the same name. The following example uses an element type selector to match all <ul> elements:

CSS

1

2

3

4

ul {

list-style:none;

border:solid1px#ccc;

}

An ID selector is declared using a hash, or pound symbol (#) preceding a string of characters. The string of characters is defined by the developer. This selector matches any HTML element that has an ID attribute with the same value as that of the selector, but minus the hash symbol.

CSS

1

2

3

4

#container {

width:960px;

margin:0auto;

}

The class selector is the most useful of all CSS selectors. It’s declared with a dot preceding a string of one or more characters. Just as is the case with an ID selector, this string of characters is defined by the developer.

The class selector also matches all elements on the page that have their class attribute set to the same value as the class, minus the dot.

CSS

1

2

3

4

5

.box {

padding:20px;

margin:10px;

width:240px;

}

The descendant selector or, more accurately, the descendant combinator lets you combine two or more selectors so you can be more specific in your selection method. For example:

1

2

3

4

#container .box {

float:left;

padding-bottom:15px;

}

This declaration block will apply to all elements that have a class of box that are inside an element with an ID of container.

A child selector is similar to a selector that uses a descendant combinator, except it only targets immediate child elements.

CSS

1

2

3

4

#container > .box {

float:left;

padding-bottom:15px;

}

This is the same code from the descendant combinator example, but instead of a space character, we’re using the greater-than symbol (or right angle bracket.)

In this example, the selector will match all elements that have a class of box and that are immediate children of the container element. That means, unlike the descendant combinator, there can’t be another element wrapping .box—it has to be a direct child element.

Here’s an HTML example:

XHTML

1

2

3

4

5

6

7

<div id="container">

<div class="box"></div>

<div>

<div class="box"></div>

</div>

</div>

In this example, the CSS from the previous code example will apply only to the first <div> element that has a class of box. As you can see, the second <div> element with a class of box is inside another <div> element. As a result, the styles will not apply to that element, even though it too has a class of box.

Again, selectors that use this combinator can be somewhat restricting, but they can come in handy—for example, when styling nested lists.

Thea general sibling combinator matches elements based on sibling relationships. That is to say, the selected elements are beside each other in the HTML.

CSS

1

2

3

h2 ~ p {

margin-bottom:20px;

}

This type of selector is declared using the tilde character (~). In this example, all paragraph elements (<p>) will be styled with the specified rules, but only if they are siblings of <h2> elements. There could be other elements in between the <h2> and <p>, and the styles would still apply.

Let’s apply the CSS from above to the following HTML:

YAML

1

2

3

4

5

6

7

<h2>Title</h2>

<p>Paragraphexample.</p>

<p>Paragraphexample.</p>

<p>Paragraphexample.</p>

<divclass="box">

<p>Paragraphexample.</p>

</div>

In this example, the styles will apply only to the first three paragraph elements. The last paragraph element is not a sibling of the <h2> element because it sits inside the <div> element.

The adjacent sibling combinator uses the plus symbol (+), and is almost the same as the general sibling selector. The difference is that the targeted element must be an immediate sibling, not just a general sibling.

Let’s see what the CSS code for this looks like:

CSS

1

2

3

4

p + p {

text-indent:1.5em;

margin-bottom:0;

}

This example will apply the specified styles only to paragraph elements that immediately follow other paragraph elements. This means the first paragraph element on a page would not receive these styles. Also, if another element appeared between two paragraphs, the second paragraph of the two wouldn’t have the styles applied.

So, if we apply this selector to the following HTML:

XHTML

1

2

3

4

5

6

7

8

9

<h2>Title</h2>

<p>Paragraph example.</p>

<p>Paragraph example.</p>

<p>Paragraph example.</p>

<div class="box">

<p>Paragraph example.</p>

<p>Paragraph example.</p>

</div>

The styles will apply only to the second, third, and fifth paragraphs in this section of HTML.

A pseudo-class uses a colon character to identify a pseudo-state that an element might be in—for example, the state of being hovered, or the state of being activated.

Let’s look at a common example:

CSS

1

2

3

a:hover {

color:red;

}

In this case, the pseudo-class portion of the selector is the :hover part. Here we’ve attached this pseudo-class to all anchor elements (<a> elements). This means that when the user hovers their mouse over an <a> element, the color property for that element will change to red.