CSS selectors are used to select the content you want to style. Selectors are the part of CSS rule set. CSS selectors select HTML elements according to its id, class, type, attribute etc.
There are several different types of selectors in CSS.
- CSS Element Selector
- CSS Id Selector
- CSS Class Selector
- CSS Universal Selector
- CSS Group Selector
1] CSS Element Selector
The element selector selects the HTML element by name.
Test it NowOutput:
This style will be applied on every paragraph.
Me too!
And me!
2] CSS Id Selector
The id selector selects the id attribute of an HTML element to select a specific element. An id is always unique within the page so it is chosen to select a single, unique element.
It is written with the hash character [#], followed by the id of the element.
Let?s take an example with the id "para1".
Test it NowOutput:
Hello Javatpoint.com
This paragraph will not be affected.
3] CSS Class Selector
The class selector selects HTML elements with a specific class attribute. It is used with a period character . [full stop symbol] followed by the class name.
Note: A class name should not be started with a number.
Let's take an example with a class "center".
Test it NowOutput:
This heading is blue and center-aligned.
This paragraph is blue and center-aligned.
CSS Class Selector for specific element
If you want to specify that only one specific HTML element should be affected then you should use the element name with class selector.
Let's see an example.
Test it NowOutput:
This heading is not affected
This paragraph is blue and center-aligned.
4] CSS Universal Selector
The universal selector is used as a wildcard character. It selects all the elements on the pages.
Output:
This is heading
This style will be applied on every paragraph.
Me too!
And me!
5] CSS Group Selector
The grouping selector is used to select all the elements with the same style definitions.
Grouping selector is used to minimize the code. Commas are used to separate each selector in grouping.
Let's see the CSS code without group selector.
As you can see, you need to define CSS properties for all the elements. It can be grouped in following ways:
Let's see the full example of CSS group selector.
Test it NowOutput:
Hello Javatpoint.com
Hello Javatpoint.com [In smaller font]
This is a paragraph.
The CSS element type selector is used to select all elements of a type. The syntax for CSS element type selector is as follows
Syntax
element { /*declarations*/ }
Example
The following examples illustrate CSS element type selector
Live Demo
li { list-style: none; margin: 5px; border-bottom-style: dotted; } div { box-shadow: inset 0 0 8px plum; padding: 36px; }\[╪][╪] /
Output
This gives the following output −
Example
Live Demo
li { text-align: center; list-style: none; margin: 5px; padding: 5px; box-shadow: inset 0 0 15px yellowgreen; } div { box-shadow: inset 0 0 8px orange; padding: 36px; width: 30%; border-radius: 50%; }
- Hello
- Guys
Output
This gives the following output −
Updated on 08-Jan-2020 12:09:12
- Related Questions & Answers
- Role of CSS :first-of-type Selector
- Role of CSS :last-of-type Selector
- Role of CSS :only-of-type Selector
- Role of CSS :nth-of-type[n] Selector
- Role of CSS :nth-last-of-type[n] Selector
- jQuery element Selector
- Role of CSS :not [selector] Selector
- CSS Child Selector
- CSS Descendant Selector
- Universal Selector in CSS
- CSS Selector to Select Elements Not Having Certain Class / Attribute / Type
- jQuery :first-of-type Selector
- jQuery :last-of-type Selector
- jQuery :nth-of-type[] Selector
- jQuery :only-of-type Selector
What does type selector mean?
element and change its color to blue.
What is an example of a type selector CSS?
, , and Which is an example of type selector?
is an html element, and the selector "h1" will select it. "#h1" doesn't match a particular element type, it matches on id attribute of any element type.
What are the 3 types of selectors in CSS?