Selectors select elements for styling

In a previous lesson you learnt that selectors are the first of the three parts of CSS, and that they are used to select elements. And once an element has been selected, a particular set of styling rules can be applied to it. In this lesson you will learn about two of the most common selectors: Classes and IDs. You will learn about some other types of selectors in later lessons.

Classes and IDs

You use 'classes' and 'ID's by giving an element a name in the HTML. In the stylesheet, the same name is listed alongside a set of styling rules. The browser displays the element according to those styling rules.

You can choose any name you like for a class or ID. Naturally it pays to choose something that is meaningful or easy to recognise.

This is how classes and IDs differ:

Class: Any number of elements can have the same class name. Elements of more than one type can be in the same class
ID: Only one element on each page can have a particular ID

Giving an element a class or ID name

Remember how we give an element a name, and that name is listed in the stylesheet? Here we look at the first step, giving the element a name.

Class or ID attribute

Give an element a class name or ID by entering a class or ID attribute in the element opening tag, as shown in the code below. Remember that this is done in the HTML file.

Format of class and ID attributes


class="classname"		  [class attribute]
id="idname"			  [ID attribute]

Here is an example of a paragraph element with a class attribute. This paragraph belongs to the 'normalparagraphtext' class. Notice how the class name I have chosen is descriptive.


<p class="normalparagraphtext">

Element without class or ID

<p>

Element with class


<p class="classname">

Element with ID


<p id="idname">

Element with both class and ID

An element can have both a class and ID.


<p class="classname" id="idname">

Multi-class element

An element can have more than one class, or more than one class and an ID as well, but it can’t have multiple IDs. Note the space between the classnames.


<p class="classname1 classname2">	
[two classes]

<p class="classname1 classname2" id="idname">	
[two classes and an ID]

Selecting an element with a class name or ID

Now that you've given the element a class or ID name, it's time for the second step, listing, or selecting, the class or ID name in the stylesheet.

The code for selecting a class is a full stop (period) followed by the name of the class.

	
.classname			  
[selects elements of the class 'classname']

For selecting by ID, it is the 'pound' sign followed by the name of the ID.

		
#idname 			  
[selects the element with the id of 'idname']

Have another look at the stylesheet. Notice how the IDs (in blue) have a pound sign, while the classes have a full stop (period). You will be learning about the rest of the stylesheet code in the next lesson.

Selecting multiple classes

You can use a single ruleset to select multiple classes. Use a comma to separate from following classname.


.classname1, .classname2	
[Note comma. Selects both]

.classname1, #idname		
[Note comma. Selects both]

Selecting a multi-class element

An element with two (or more) classes can be selected by just one of those classes.


<p class="classname1 classname2">	
	[paragraph with two classes]

.classname1					
[selects above paragraph]		
		
.classname2					
[also selects above paragraph]

<Previous lesson

Next lesson>