=>CSS selectors:

  • 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. 
  • The selector points to the HTML element you want to style. 
  • The declaration block contains one or more declarations separated by a semicolons.
  • Each declaration includes a CSS property name and a value , separated by a colon. 
  • A CSS declaration always ends with a semicolon , and declaration blocks are surrounded by curly braces.
There are several different types of selectors in CSS.
  1. CSS Element Selector 
  2. CSS Id Selector 
  3. CSS Class Selector 
  4. CSS Universal Selector 
  5. CSS Group Selector
1) 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 blue text color.)

<html> 
<head> 
<style> 
P 
{ 
  text-align: center; 
  color: blue; 
}  
</style> 
</head> 
<body>
<p>This style will be applied on every paragraph.</p> 
<p id="para1">Me too!</p> 
<p>And me!</p> 
</body> 
</html>

2) CSS Id Selector :
  • The id selector select a specific element base on its id attribute. 
  • An id is always unique within the page so it is chosen to select a single, unique element. 
  • It is written with the hash character (#), followed by the id of the element.
Example :

<html> 
<head> 
<style> 
#para1 
{ 
  text-align: center; 
  color: blue; 
} 
</style> 
</head> 
<body> 
<p id="para1">Hello Javatpoint.com</p> 
<p>This paragraph will not be affected.</p> 
</body> 
</html>
3) 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. 
  • In the example below , all HTML elements with class = “center” will be blue and center-aligned. 
  • A class name should not be started with a number.
<html> 
<head> 
<style> 
.center { 
    text-align: center; 
    color: blue;
} 
</style> 
</head> 
<body> 
<h1 class="center">This heading is blue and center-aligned.</h1> <p class="center">This paragraph is blue and center-aligned.</p> </body> 
</html>

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.

<html> 
<head> 
<style> 
p.center 
{ 
  text-align: center; 
  color: blue; 
} 
</style> 
</head> 
<body> 
<h1 class="center">This heading is not affected</h1> 
<p class="center">This paragraph is blue and center-aligned.</p> </body> 
</html>

4) CSS UNIVERSAL SELECTOR:
  • The universal selector is used as a wildcard character. It selects all the elements on the pages.
Example :

<html> 
<head> 
<style> 
* 
{ 
  color: green; 
  font-size: 20px; 
} 
</style> 
</head>
<body> 
<h2>This is heading</h2> 
<p>This style will be applied on every paragraph.</p> 
<p id="para1">Me too!</p> 
<p>And me!</p> 
</body> 
</html>
5) CSS GROUP SELECTOR:
  • The grouping selector is used to select all the elements with the same style definitions. 
  • Grouping selector is used to minimize the code. Commas are used to separate each selector in grouping.

<html> 
<head> 
<style> 
h1, h2, p 
{ 
  text-align: center; 
  color: blue; 
} 
</style> 
</head> 
<body> 
<h1>Hello Javatpoint.com</h1> 
<h2>Hello Javatpoint.com (In smaller font)</h2> 
<p>This is a paragraph.</p> 
</body> 
</html>