CSS Selectors

CSS selectors are very important. CSS selector are selecte by that content for which we want to write CSS Rules.

The CSS Rule of the selectors is a part of Syntax. Which can be an HTML Element, Element Attribute

Types of CSS Selectors

Selectors are use according to the situation. CSS provides different types of Selectors for this. Which gives flexibility to Web Masters. Below you are being tell about Different Types of Selectors.

The element Selector

This is a Particular HTML Element. It also called Type Selector. In this you declare the CSS Rule by making HTML Element selector. The word or syllable from which any HTML element is represente. The same word or syllable also written by the selector.

Example

<!DOCTYPE html>
<html>
<head>
<style>
p {
  text-align: center;
  color: red;
} 
</style>
</head>
<body>

<p>This is element selector.</p>

</body>
</html>

The Universal Selectors

When you want to apply the same style rule to all the Elements available in any HTML document, then Universal Selectors are use. Universal Selector is represente by * (Asterisk).

Example

<!DOCTYPE html>
<html>
<head>
<style>
* {
  text-align: center;
  color: red;
} 
</style>
</head>
<body>

<p>This is element selector.</p>

</body>
</html>

The Class Selectors

Class is a Global Attribute. You can use it for CSS Selector. You want to apply a style rule to the Elements Elements. All those Elements are defined by Class Attribute in Class Define. And this class name is written to the CSS Rule by putting the first Full Stop Symbol (.).

You can define a class for more than one element. You just have to define a different class with each name in each element. One thing to keep in mind is that you can not start Class Name with the number

Example

<!DOCTYPE html>
<html>
<head>
<style>
.myclass {
  text-align: center;
  color: red;
} 
</style>
</head>
<body>

<p class="myclass">This is element selector.</p>

</body>
</html>

The ID Selectors

IDs like Class are also a Global Attribute. It can also be made by CSS Selector. IDs are unique identities of an Element. Each Element is defined differently. ID selector is written with # (Hash). You can not even start the name of the ID with a number.

Example

<!DOCTYPE html>
<html>
<head>
<style>
#myclass {
  text-align: center;
  color: red;
} 
</style>
</head>
<body>

<p id="myclass">This is element selector.</p>

</body>
</html>

The Attribute Selectors

In the Attribute Selector we select the Element’s Particular Attribute for the Selector. This method is mostly used for Form Element.

Example

input[type = "text"] {
   color: #000000; 
}

Descendant Selectors or Sub-selectors

You can also apply the CSS Rule to an Element within another Element Define. This work done by Descendant Selector. This also called a sub-selector. For this, the Parent Selector written first, then it written within it by assigning a space to Define Child Element. Then the CSS Rule is Declare.

Example

ul.menu li a {
    text-decoration: none;
}
h1 em {
    color: green;
}

Child Selectors


You can also understand this as a sub-selector. But, this is the second task. Applying a CSS to a Child Selector written to the Parent Selector first. After this, the sign of <Greater Than is given by giving space. Again, giving the space is written to the Child Selector. And CSS Rule is declared.

Example

body > p {
   color: #000000; 
}

Multiple Style Rules

When a particular selector has to declare more than one CSS rule, then that condition called Declare Multiple Style Rule. In this you declare Multiple Style Rules at the same time for any selector.

Example

h1 {
   color: #36C;
   font-weight: normal;
   letter-spacing: .4em;
   margin-bottom: 1em;
   text-transform: lowercase;
}

Grouping Selectors

If you want to apply the same CSS Style to more than one Elements So we will declare different CSS Rules for each element. But, while CSS’s grouping technique, we can declare a style for multiple elements.

Example

h1, h2, p {
  text-align: center;
  color: red;
}