CSS Selectors

HTML or Hypertext Markup Language is a designing language. It allows the users to create their own webpages and then upload them on some web server which makes it available to all the surfers on the web across the globe. Under HTML, we have CSS which stands for  Cascading Style Sheet, which is a style sheet language which allows the users to style the content of their webpage.

CSS provides us with various selectors which help us in selecting and styling many matching elements at the same time. It also offers additional features but a discussion on them is beyond the scope of this article. In this article, we will discuss about a type of selector which is Class Selector, followed by a brief discussion on ID Selector. 

(Image will be uploaded soon)

CSS

(Image will be uploaded soon)

Work of CSS Selectors

What is Class Selector?

Class selector allows us to select and style different elements having the same class name and also it has different classes thus allowing the same element to have different styles. Basically, it is used to specify a style for a group of elements, may it be the same style for more than one element or different styles for the same element.  For example,  to centre align all elements of the class student, the code would be: Student (text-align: centre;).

(Image will be uploaded soon)

Example Code for Class Selector

What is Class Selector?

The .class selector is a feature of CSS, it selects elements with a specific class attribute, which we specify along with the command. To select elements having a specific class, by using class selector, write a period (.) character then followed by specifying the name of the class.

We can also specify that only specific HTML elements should be affected by the class specified. In order to do this, first start with the element name, then write the period (.) character, lastly followed by the name of the class. On the other hand, the HTML elements can also refer to more than one class at the same time. 

(Image will be uploaded soon)

CSS Selectors Syntax

ID Selector

Every element has a unique ID within the page, so the id selector is a feature which is used to select one unique element from the entire page of elements. Thus, the id selector uses the id attribute of an HTML element to select a specific element. 

To work with the ID Selector function to select an element having a specific id, simply write a hash (#) character, followed by the id of the element.

ID selectors are assigned individually to the elements based on their unique ids, thus it is used for specifying single, unique elements. The following code snippet is an example of  how to assign ID selector:

P1

{

text-align: centre;

colour green;

}

(Image will be uploaded soon)

Example Code for ID Selector

Sample Questions

1. What is CSS?

Ans: CSS is a stylesheet language used to describe the presentation of a document written in HTML or XML. It is used to describe how the elements should be rendered on screen, on paper, in speech, or on any other media, that is it is used to determine the element’s final format. 

2. What are the different types of CSS selectors?

Ans: CSS selectors are used to select the HTML elements we want to style. 

The different types of CSS selectors are:

• Simple selectors ( these select elements based on  simple names, unique ids or class)

• Combinator selectors (they select elements based on a specific relationship between the elements)

• Pseudo-class selectors (they select elements based on a certain state)

• Pseudo-elements selectors (these select and style a specific part of an element)

• Attribute selectors (these select elements based on an attribute or attribute value that they have)

Learning by Doing 

Complete the given statements by replacing the missing words with suitable answers.

1. CSS stands for _________

2. Every HTML character has a __________ id.

3. Class selector works with elements having _________ class.

4. There are mainly ________ types of Selectors in CSS.

5. The main purpose of CSS is to define the _______ look of the elements. 

6. While using the class selector command, we must first use ____.

7. We start an id selector command with ________. 

Answers:

1. Cascading Style Sheet

2. unique 

3. similar/matching

4. five

5. final

6. .

7. #

Summary

The class selector is a feature in CSS and is used to select and style elements having similar matching classes, by specifying the class, its syntax is: .class(the element). The Id Selector is used to select a unique element from the entire document based on the unique id given to every single HTML element in the page.