CSS Selectors are HTML elements identifier. CSS selector used to identify HTML element OR a group of HTML elements from HTML document.

In this CSS Selector tutorial, we will learn about CSS selector from basic to advance level with examples.

Why CSS Selectors?

The CSS elements used in HTML web page like <p>, <h1>, <h2>, <div>, <ul>, <img>, etc. So, if you want to define CSS code for the some element among these element then how you will recognize that element for which you are going to write CSS code then the simple answer of this question is by using CSS Selector, because we know that CSS selectors are used to identify HTML elements.

Types of CSS Selector

Basically CSS Selectors are categorized into five categories i.e. basic and advance.

• Simple Element Selectors (Based on name, id, class)
• Combinator Selectors (Based on a specific relationship between them)
• Pseudo-class Selectors (Based on a certain state)
• Pseudo-elements Selectors (Style a part of an element)
• Attribute Selectors (Based on an attribute or attribute value)

CSS Element Selector

<p>, <h1>, <a>, <ul>, <li>, etc are the element in HTML. Now, if you want to apply CSS properties on these element then you can use Element Selectors, for example:

Simple HTML Code Example

<p>Hello this is paragraph "p" element.</p>
<h1>Hello! I'm h1 element.</h1>
<a>Hey! there... this is a tag.</a>

Let's Apply some CSS properties on these HTML element:

Example of element selector CSS Code

Output

Hello this is paragraph "p" element.
Hello! I'm h1 element.
Hey! there... this is a tag.

If you want to apply same CSS properties on two OR more HTML element.
See below mentioned CSS Code:

Example of Multiple elements CSS Code

CSS class Selector

To select elements with a specific class, write a period (.) character, followed by the class name.

Write CSS class in side the HTML tag like <p class="myp">, <a class="mylink">, <div class="exdiv">. myp, mylink and exdiv are CSS class selector in HTML.

Simple HTML Code Example

<p class="myp">I don't know my name but my class is 'myp'.</p>
<a class="mylink">Hello there it a tag, my beautiful class name is'mylink'.</a>
<div class="exdiv">So what..? it's div i'm to good with class 'exdiv'.</div>

Example of class selector CSS Code

NOTE: If you want to apply the same style on two or more class then separate them with a comma (,); for example CSS Code mentioned below:

Example of Two class selector CSS Code

NOTE: A HTML element can have more than two class in the same element. We can write style for both separately by giving a space between them, see below mentioned example:

<p class="myp hello_p">Hello this is a paragraph with two class 'myp' & 'hello_p'.</p>

CSS id Selector

• The CSS id selector uses the ID ATTRIBUTE of an HTML element to select a specific element.
• The CSS id of an element is unique within a page, it means you can able to use one ID CSS selector only one time in a whole HTML page.
• The id selector specify by hash (#) character before the id selector name.

For example <p id="myp">, <a id="mylink">, <div id="exdiv">, where myp, mylink and exdiv are ID Selectors.

ID Selector HTML Code

<p id="myp">Whats app..? my id is 'myp'.</p>
<a id="mylink">So what, i also have id 'mylink' </a>
<div id="exdiv">It's cool .., every one can have id like me 'exdiv'.</div>

Example of id selector CSS Code

CSS Universal Selector

The universal selector (*) selects all HTML elements on the page.

Example of Universal CSS Code

List of All CSS Selectors