CSS Selector

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 Group Selector
  • CSS Universal Selector
  • CSS Descendant Selector
  • CSS Child Selector

CSS Element Selector

The element selector selects the HTML element by name. You can select all <p> elements on a page like this (in this case, all </p> elements will be center-aligned, with a red text color):


<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Element Selector </title>
<meta charset="UTF-8">
<style>
p {
color: gray;
text-align: center;
}
</style>
</head>
<body>
<p> This style will be applied on every paragraph.. </p>
<p> paragraph 1 </p>
<p> paragraph 2 </p>
</body>
</html>

Output

CSS Element Selector Example

This style will be applied on every paragraph..

paragraph 1

paragraph 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.
  • To select an element with a specific id, write a hash (#) character, followed by the id of the element.
  • You can select all <p> elements on a page like this (in this case, all </p> elements will be center-aligned, with a red text color):
  • The style rule below will be applied to the HTML element with id="para1":

<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Id Selector </title>
<meta charset="UTF-8">
<style>
#para1 {
color: green;
text-align: center;
}
</style>
</head>
<body>
<p id="para1"> Hello World! (This paragraph is affected by style). </p>
<p> This paragraph is not affected by the style. </p>
</body>
</html>

Output

CSS Id Selector

Hello World! (This paragraph is affected by style).

This paragraph is not affected by the style.


Note : An id cannot start with number.

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.


<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Class Selector </title>
<meta charset="UTF-8">
<style>
.center {
color: orange;
text-align: center;
}
</style>
</head>
<body>
<h1 class="center"> This heading is orange and center-aligned. </h1>
<p class="center"> This paragraph is orange and center-aligned. </p>
</body>
</html>

Output

CSS Class Selector Examples

This heading is orange and center-aligned.

This paragraph is orange 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.


<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Class Selector </title>
<meta charset="UTF-8">
<style>
p.center {
color: seagreen;
text-align: center;
}
</style>
</head>
<body>
<h1 class="center"> This heading will not be affected. </h1>
<p class="center"> This paragraph will be seagreen and center-aligned. </p>
</body>
</html>

Output

CSS Class Selector

This heading will not be affected.

This paragraph will be seagreen and center-aligned.


CSS Grouping Selector

The grouping selector is used to select all the elements with the same style definitions. It is used to minimize the code. Commas (,) are used to separate each selector in grouping.


<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Grouping Selector </title>
<meta charset="UTF-8">
<style>
h1 {
color: seagreen;
text-align: left;
}
h2 {
color: red;
text-align: center;
}
p {
color: blue;

text-align: right;
}
</style>
</head>
<body>
<h1> This heading is seagreen and left-aligned. </h1>
<h2> This heading is red and center-aligned. </h2>
<p> This paragraph is blue and right-aligned. </p>
</body>
</html>

Output

CSS Grouping Selector

This heading is seagreen and left-aligned.

This heading is red and center-aligned.

This paragraph is blue and right-aligned.


CSS Universal Selector

The universal selector is used as a wildcard character. It selects all the elements on the pages.


<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Universal Selector </title>
<meta charset="UTF-8">
<style>
*{
color: green;
text-align: left;
font-size:20px;
}
</style>
</head>
<body>
<h1> This is heading 1. </h1>
<h2> This is heading 2 </h2>
<p> This style will be applied on every paragraph. </p>
</body>
</html>

Output

CSS Universal Selector

This is heading 1.

This is heading 2

This style will be applied on every paragraph.


CSS Descendant Selectors

They are used if you want to target only those anchors that are contained within an unordered list, rather than targeting all anchor elements.


<!DOCTYPE html>
<html>
<head>
<title>Example of CSS Descendant Selectors</title>
<style type="text/css">
h1 em {
color: green;
}
ul.menu {
padding: 0;
list-style: none;
}
ul.menu li{
display: inline;
}
ul.menu li a {
margin: 10px;
text-decoration: none;
}
</style>
</head>
<body>
<h1>This is a <em>heading</em></h1>
<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Feedback</a></li>
</ul>
</body>
</html>

Output

CSS Descendant Selector

This is a heading


CSS Child Selectors

A child selector can be used to select only those elements that are the direct children of some element. A child selector is made up of two or more selectors separated by the greater than symbol (i.e. >).


<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Child Selector </title>
<meta charset="UTF-8">
<style type="text/css">
ul > li {
list-style: square;
}
ul > li ol {
list-style: none;
}
a{
text-decoration: none;
}
</style>
</head>
<body>
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li>
<a href="#">JavaScript</a>
<ol>
<li><a href="#">PHP</a></li>
<li><a href="#">Angular</a></li>
</ol>
</li>
<li><a href="#">Contact</a></li>
</ul>
</body>
</html>

Output

CSS Child Selector



Color Picker

List of color names supported by all browser »



Character Code

List of character codes to display special character »



Language Code

List of all language supported by all browser »



Country Code

List of Country code supported by all browser »

Latest Updates

PHP Introduction

How to Run a PHP program in Xampp?

How can I create a phpinfo.php page?

How to Define a Variable in PHP

PHP Echo and Print Statements

Working with PHP Operators

Understanding the PHP Data Types

How to Write Comments in PHP

How to Define a Constant in PHP

PHP if...else...elseif Statements