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.

Note

Basic selectors are sometimes called simple selectors.

The five (5) types of CSS basic selectors are:

• Name selector
• ID selector
• Class selector
• Grouping selector
• Universal selector

Let’s discuss the five basic selectors below.

What Is a CSS Name Selector?

A CSS name selector selects HTML elements that match a specified tag name.

Note

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>

Try Editing It

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>

Try Editing It

AD

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 }

Note

• 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>

Try Editing It

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>

Try Editing It

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 }

Note

• A class attribute’s value is sometimes called class name.
• A class attribute’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>

Try Editing It

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>

Try Editing It

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>

Try Editing It

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>

Try Editing It

Note

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".

AD

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.

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.

Note

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>

Try Editing It

Example 2: Apply red to the h1 and paragraph element with a "highlight" class name

The grouping selector (,) below selects the HTML elements that match the listed selectors.

h1,
p.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>

Try Editing It

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 }

AD

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>

Try Editing It

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>

Try Editing It