Basic Selectors in CSS – What Is a CSS Basic Selector?
A CSS basic selector selects an HTML element based on the element's name, id, or class.
Basic selectors are sometimes called simple selectors.
The five (5) types of CSS basic selectors are:
- Name selector
- ID selector
- Class selector
- Multiple selector
- Universal selector
Let's discuss the five basic selectors below.
Name Selector: What Is a CSS Name Selector?
A CSS name selector selects HTML elements that match a specified tag name.
Name selectors are sometimes called "type (or element) selectors."
Syntax of a name selector
Here is the syntax of a name selector:
element-name { style declarations }
Example 1: Apply DeepPink to all paragraphs
The paragraph tag name selector (p) below selects all <p> elements.
p {
color: DeepPink;
}
So, suppose the snippet below is the HTML document for the above CSS ruleset. DeepPink will get applied only to all the <p> elements.
<h1>Hello there! 👋 I am Heading 1</h1>
<p>First paragraph immediately after heading 1</p>
<h2>Heading 2 is my name</h2>
<p>Second paragraph immediately after heading 2</p>
<p>Third paragraph</p>
<p>Fourth paragraph</p>
Example 2: Apply red to all divs
The div element name selector below selects all <div> nodes.
div {
color: red;
}
So, suppose the snippet below is the HTML document for the above CSS ruleset. In that case, red will get applied only to all the <div> nodes.
<section>
<div>Div 1 directly inside a section 1</div>
</section>
<section>
<p>Paragraph 1 directly inside section 2</p>
<p>Paragraph 2 directly inside section 2</p>
</section>
<section>
<div>Div 2 directly inside section 3</div>
<p>Paragraph 3 directly inside a section 3</p>
<p>Paragraph 4 directly inside a section 3</p>
<p>Paragraph 5 directly inside a section 3</p>
</section>
<section>
<div>Div 3 directly inside section 4</div>
</section>
<p>Paragraph 6 directly inside the document's body element</p>
ID Selector: What Is a CSS ID Selector?
An ID selector selects an HTML element with a specified id attribute value.
Syntax of an ID selector
We use a hash (#) symbol to represent an HTML element's id attribute. Here is the syntax:
#id-value { style declarations }
- No two elements on a page should use the same ID value. In other words, an ID selector selects a unique element on a page.
- An id's value should not begin with a number.
Example 1: Apply DeepPink to the element with an ID value of "unique"
The ID selector (#unique) below selects the HTML element with an ID value of "unique".
#unique {
color: DeepPink;
}
So, suppose the snippet below is the HTML document for the above CSS ruleset. In that case, DeepPink will get applied only to the <h1> element.
<h1 id="unique">Hello there! 👋 I am Heading 1</h1>
<p>First paragraph immediately after heading 1</p>
<h2>Heading 2 is my name</h2>
<p>Second paragraph immediately after heading 2</p>
<p>Third paragraph</p>
<p>Fourth paragraph</p>
Example 2: Apply red to the element with an "exclusive" ID value
The ID selector (#exclusive) below selects the element with an ID value of "exclusive".
#exclusive {
color: red;
}
So, suppose the snippet below is the HTML document for the above CSS ruleset. In that case, red will get applied only to the <section> element with an ID value of "exclusive".
<section>
<div>Div 1 directly inside a section 1</div>
</section>
<section>
<p>Paragraph 1 directly inside section 2</p>
<p>Paragraph 2 directly inside section 2</p>
</section>
<section id="exclusive">
<div>Div 2 directly inside section 3</div>
<p>Paragraph 3 directly inside a section 3</p>
<p>Paragraph 4 directly inside a section 3</p>
<p>Paragraph 5 directly inside a section 3</p>
</section>
<section>
<div>Div 3 directly inside section 4</div>
</section>
<p>Paragraph 6 directly inside the document's body element</p>
Class Selector: What Is a CSS Class Selector?
A class selector selects HTML elements that have a specified class attribute value.
Syntax of a class selector
We use a period (.) character to represent an HTML element's class attribute. Here is the syntax:
.class-value { style declarations }
- A
classattribute's value is sometimes called class name. - A
classattribute's value should not begin with a number.
Example 1: Apply DeepPink to the elements with a class value of "heading"
The class selector (.heading) below selects HTML elements with a "heading" class value.
.heading {
color: DeepPink;
}
So, suppose the snippet below is the HTML document for the above CSS ruleset. In that case, DeepPink will get applied only to the <h1> and <h2> elements.
<h1 class="heading">Hello there! 👋 I am Heading 1</h1>
<p>First paragraph immediately after heading 1</p>
<h2 class="heading">Heading 2 is my name</h2>
<p>Second paragraph immediately after heading 2</p>
<p>Third paragraph</p>
<p>Fourth paragraph</p>
Example 2: Apply red to the elements with a "last-para" class value
The class selector (.last-para) below selects the HTML elements with a class value of "last-para".
.last-para {
color: red;
}
So, suppose the snippet below is the HTML document for the above CSS ruleset. In that case, red will get applied only to the second, fifth, and sixth paragraphs.
<section>
<div>Div 1 directly inside a section 1</div>
</section>
<section>
<p>Paragraph 1 directly inside section 2</p>
<p class="last-para">Paragraph 2 directly inside section 2</p>
</section>
<section>
<div>Div 2 directly inside section 3</div>
<p>Paragraph 3 directly inside a section 3</p>
<p>Paragraph 4 directly inside a section 3</p>
<p class="last-para">Paragraph 5 directly inside a section 3</p>
</section>
<section>
<div>Div 3 directly inside section 4</div>
</section>
<p class="last-para">Paragraph 6 directly inside the document's body element</p>
Example 3: How to style elements with a specific class
Here's how to select only the HTML elements containing a specific class:
div.last-element {
color: red;
}
The CSS snippet above selects only the div elements containing the last-element class value.
<section>
<div class="last-element">Div 1 directly inside a section 1</div>
</section>
<section>
<p>Paragraph 1 directly inside section 2</p>
<p class="last-element">Paragraph 2 directly inside section 2</p>
</section>
<section>
<div>Div 2 directly inside section 3</div>
<p>Paragraph 3 directly inside a section 3</p>
<p>Paragraph 4 directly inside a section 3</p>
<p class="last-element">Paragraph 5 directly inside a section 3</p>
</section>
<section>
<div class="last-element">Div 3 directly inside section 4</div>
</section>
<p class="last-element">
Paragraph 6 directly inside the document's body element
</p>
Example 4: How to style elements with specific classes
Here's how to select only the HTML elements containing specific classes:
.first-element.last-element {
color: red;
}
The CSS snippet above selects the elements containing the first-element and last-element class names.
<section>
<h1 class="first-element last-element">Hello there! 👋 I am Heading 1</h1>
</section>
<section>
<div class="first-element last-element">
Div 1 directly inside a section 1
</div>
</section>
<section>
<p class="first-element">Paragraph 1 directly inside section 2</p>
<p class="last-element">Paragraph 2 directly inside section 2</p>
</section>
<section>
<div class="first-element">Div 2 directly inside section 3</div>
<p>Paragraph 3 directly inside a section 3</p>
<p>Paragraph 4 directly inside a section 3</p>
<p class="last-element">Paragraph 5 directly inside a section 3</p>
</section>
<section>
<div class="first-element last-element">Div 3 directly inside section 4</div>
</section>
<p class="last-element">
Paragraph 6 directly inside the document's body element
</p>
Suppose you wish to use multiple classes on a single element. In that case, use the space character to separate the classes—for instance, class="first second third".
Class vs. ID CSS attributes: What's the difference?
No two elements on a page should use the same ID value. But you can use the same class name for multiple elements.
Here's an example:
<h1 id="title">Hello there! 👋 I am Heading 1</h1>
<p class="reusable">First paragraph immediately after heading 1</p>
<h2 class="reusable">Heading 2 is my name</h2>
<p class="reusable">Second paragraph immediately after heading 2</p>
<p class="reusable">Third paragraph</p>
<h2 id="second-h2" class="reusable">Heading 2 is my name</h2>
<div class="reusable">First div immediately after third paragraph</div>
The snippet above used the same class name for six elements but unique values for the id attributes.
Grouping Selector: What Is a CSS Grouping Selector?
A grouping selector selects a group of HTML nodes that matches the specified list of selectors.
Syntax of a grouping selector
We use the comma (,) character to represent the grouping selector. Here is the syntax:
first-selector, second-selector, third-selector { style declarations }
Grouping selectors help to reduce a stylesheet's code.
A grouping selector is sometimes called a selector list.
Example 1: Apply DeepPink to the h1 and h2 headings
The grouping selector (,) below selects a group of <h1> and <h2> elements.
h1,
h2 {
color: DeepPink;
}
So, suppose the snippet below is the HTML document for the above CSS ruleset. In that case, DeepPink will get applied only to the <h1> and <h2> elements.
<h1>Hello there! 👋 I am Heading 1</h1>
<p>First paragraph immediately after heading 1</p>
<h2>Heading 2 is my name</h2>
<p>Second paragraph immediately after heading 2</p>
<p>Third paragraph</p>
<h2>Heading 2 is my name</h2>
<p>Fourth paragraph</p>
Example 2: Apply red to the h1 and paragraph elements with a "highlight" class name
The grouping selector (,) below selects the HTML elements that match the listed selectors.
h1,
.highlight {
color: red;
}
So, suppose the snippet below is the HTML document for the above CSS ruleset. In that case, red will get applied only to the <h1> and fifth paragraph nodes.
<h1>Hello there! 👋 I am Heading 1</h1>
<section>
<div class="last-element">Div 1 directly inside a section 1</div>
</section>
<section>
<p>Paragraph 1 directly inside section 2</p>
<p class="last-element">Paragraph 2 directly inside section 2</p>
</section>
<section>
<div>Div 2 directly inside section 3</div>
<p>Paragraph 3 directly inside a section 3</p>
<p>Paragraph 4 directly inside a section 3</p>
<p class="last-element highlight">Paragraph 5 directly inside a section 3</p>
</section>
<section>
<div class="last-element">Div 3 directly inside section 4</div>
</section>
<p class="last-element">
Paragraph 6 directly inside the document's body element
</p>
Universal Selector: What Is a CSS Universal Selector?
A universal selector selects all the HTML elements on a page.
Syntax of the universal selector
We use an asterisk (*) symbol to represent the universal selector. Here is the syntax:
* { style declarations }
Example 1: Apply DeepPink to all elements
The universal selector (*) below selects all HTML elements.
* {
color: DeepPink;
}
So, suppose the snippet below is the HTML document for the above CSS ruleset. In that case, DeepPink will get applied to all the elements.
<h1>Hello there! 👋 I am Heading 1</h1>
<p>First paragraph immediately after heading 1</p>
<h2>Heading 2 is my name</h2>
<p>Second paragraph immediately after heading 2</p>
<p>Third paragraph</p>
<p>Fourth paragraph</p>
Example 2: Apply red to all the elements
The universal selector (*) below selects all HTML elements.
* {
color: red;
}
So, suppose the snippet below is the HTML document for the above CSS ruleset. In that case, red will get applied to all the elements.
<section>
<div>Div 1 directly inside a section 1</div>
</section>
<section>
<p>Paragraph 1 directly inside section 2</p>
<p>Paragraph 2 directly inside section 2</p>
</section>
<section id="exclusive">
<div>Div 2 directly inside section 3</div>
<p>Paragraph 3 directly inside a section 3</p>
<p>Paragraph 4 directly inside a section 3</p>
<p>Paragraph 5 directly inside a section 3</p>
</section>
<section>
<div>Div 3 directly inside section 4</div>
</section>
<p>Paragraph 6 directly inside the document's body element</p>
Overview
This article discussed what a CSS basic selector is. We also discussed the five types of basic selectors.