CSS Selectors

Alright! So now that you are well versed with the syntax of CSS, let's move on to Selectors. Selector helps us identify HTML elements on which a particular style has to be applied.

Selectors are of 3 types, namely,

1. element Selectors
2. id Selectors
3. class Selectors

This module will help you understand what selectors mean and how these three types of selectors work, which in turn save a lot of time and efforts when designing extensive(large) webpages.

To build a style sheet, we need to define rules that select HTML elements and apply various style properties to them. We already know about element selectors, (Recall we assigned style to the <h1> tag), don't worry if you do not remember, we will discuss it again in this tutorial. Besides element selector, the two most common forms of selectors are id and class selectors.

In the video below, we have explained all the three types of CSS selectors in details.

Element(Tag) Selectors

Element selector or Tag selector, works on HTML tag level. When we add styling for an HTML tag directly, in our CSS file, it is known as element selectors.

For example:

HTML code

<h1>Welcome to Studytonight</h1>

CSS code

h1 { 
    color: red; 
}

In the above CSS code, we have directly assigned styling to the h1 tag/element, this way of tag selection and styling is known as Element Selectors, as we assign style to the element directly.

The above CSS code, will change the font color of the text inside all the h1 tags in the HTML file, to red. This mode of selection should be used when you want to apply base styling to any element/tag, like if you want all the paragraph text in calibri font, you write the following CSS rule:

p { 
    font-family: calibri; 
}

Live Example →

id Selectors

What if, out of all the paragraph tags with font set as calibri, you want one paragraph to stand out on your webpage, and you want to style it differently. How will you do that?

Elements in HTML can be named for better reference by using an id attribute inside the tag. Consider the following example:

<p id="unique">CSS is fun!</p>

Now that the tag is named, we can assign a style rule to it just by using #unique (# followed by the id value) of the tag.

#unique {
    color: green; 
    text-align: center;
}

Live Example →

#id selector is used, when you want to style a particular tag/element. All you have to do is, assign an id attribute to the HTML tag and provide the styling for it in the CSS file.

We can also make an id selector, tag/element specific, by appending the tag before the #id selector in CSS file.

Consider the following style:

p#star {
    font-family: Arial;
}

Live Example →

This would select only the paragraph elements with their id attribute set to star. Comparing this rule to the one we saw earlier,

#star {
    font-family: Arial;
}

Which would match any element/tag with an id = "star", be it paragraphs of headings. This may answer your query as to if multiple tags can have the same id? Yes, they can! But as standard practice, id attribute should be used to style a single element.

Although CSS provides you with a way of selecting element specific id rules, like p#star, it is inappropriate to use same tag names along with id selector all the time and then filter them out based on elements. However, such rules do make sense if you have a style sheet that is being used site-wide and you have different elements by the id star in different documents. To be on the safer side and avoid confusion, it is better to use unique id for the elements.

class Selectors

The rules for a class selectors are defined as .class-name as shown below:

HTML code

<p class="fancy">I am fancy paragraph</p>
<h1 class="fancy">I am fancy heading</h1>
<h2 class="fancy">Mee too!</h2>

CSS code

.class {
    background-color: black; 
    color: white; 
    font-style: italic;
}

Live Example →

The class attribute is used to define the name of the class a particular tag or a set of tags, belongs to. Unlike id values, class values don't have to be unique because many elements can be members of the same class of style. In fact, elements of different type can also belong to the same style class.

Class rules have some variations as well. For example, setting all the h1 elements of the class css_demo to have a background-color of yellow,

h1.css_demo { background-color: yellow; }

can be used.

To explicitly select all elements of the class css_demo, * can be used as well.

*.css_demo{ background-color: yellow; }

is same as,

.css_demo{ background-color: yellow; }

Although the class and id attributes provide a great deal of flexibility for creating style rules, many other tags of equal value exist. For example, you may wish to treat all the <strong> tags inside a <p> to be treated differently, as compared to the <strong> tags appearing outside of the <p> tags. For this, you must use Contextual Selection.

Such selections are done by specifying the order in which the tags must be nested, separated by >, for the rule to be applied. For example,

p > strong{
    background-color: yellow;
}

Live Example →

The above rule will be applied to all the <strong> tags, inside a <p> tag.

All occurrences of the strong element within a p element will have a Helvetica font. Other occurrences of the strong tag which are not included inside a p tag, will not have the same rule applied to them.

Note: Be careful about using contextual selectors. An unwanted comma may turn contextual selection into grouping and vice versa.

Now that you are comfortable with selectors, let's move on to background styles in CSS!