Advertisement

Advertisement


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









Become a Patron!

Note: If the updated content is not visible to you please refresh the cookies by pressing CTRL + Shift + R.