>

ID & Class Selectors

If an element is labelled by an id or a class, that criteria can be used in a selector to apply styles only to those labeled elements.

css3 id class selectors

ID Selector

An id attribute gives an HTML element a unique identification name. id values are unique in a document.

An element with a specific id is selected with an octothorpe (#), also known as a hash character, followed by the id name. For example, consider a nav element below with its id attribute assigned the value menu 

					
					<nav id="menu">This is a navigation element.</nav>

We select the above nav element by its id and set the property color to red 

					
					#menu {	color: red; }

Remember, an id may appear only in one element in a document.

Class Selector

Unlike id values, multiple elements can have the same class name. Elements sharing the same class name can be selected with a period (.) character followed by the class name.

The below example shows nav and p elements with the same class name red 

					
					<nav class="red">This is a navigation element.</nav>

					<p class="red">This is a paragraph element.</p>

to which a CSS rule is applied with the .red selector followed by the color:red declaration

					
					.red {
						color: red;
					}

So, whatever text lies inside the nav and p elements with the red class name will be coloured red.