1. CSS-SELECTOR
  2. CSS SELECTOR
CSS Multiple Selectors To Style Elements

CSS Selector

CSS selector is used to find HTML element.CSS selector targets the HTML element so that CSS rule can be apply very easily.

Kinds Of CSS Selector

  • Universal Selector
  • Simple Selectors
  • Combinator selectors
  • Pseudo-class selectors
  • Pseudo-elements selectors
  • Attribute selectors

Universal Selector

Universal selector(*) selects all the HTML elements and applies CSS rule to all the HTML elements inside the document.

Note:CSS selector is used to finding the HTML elements inside the document. Once, the HTML element finds out then the CSS rule has been applied to that element.

let us understand CSS universal selector.

General Syntax

* {
   text-align: center;
   color: blue;
}

Source Code

Download 
* {
   text-align: center;
   color: blue;
}

Code Explanation

Note:In this example, the universal selector rule is applied to the HTML element. This rule is applied to every HTML element.

Element Type Selector

  • Rule1: Element type selector selects the element by its name and then applies the CSS style rule to the HTML element.
  • Rule2: An HTML document consists of more than one similar element then the element type selector rule will be applicable to all of the similar HTML elements.

General Syntax

p {
   color: blue;
}

Source Code

Download 
p {
   color: blue;
}

h2 {
   color: red;
}

Code Explanation

Note:In this example, the element type selector rule has been applied to the HTML element. This rule is applied to all similar HTML elements.

CSS Id Selector

Id selector rule applies on a unique HTML document element.It is defined by a hash sign(#) followed by HTML element id value.Please keep in mind that every HTML element have some property that is name ,id,class etc.Each element id value should be different while as class name may be same.

General Syntax

#text_description {
   color: #393e46;
   font-size: 20px;
}

Source Code

Download 
#text_description {
   color: #393e46;
   font-size: 20px;
}

Code Explanation

Note:In this example, the CSS id selector rule has been applied to the HTML element. Please keep in mind that every element inside the HTML document has a different id value hence CSS id selector is applied on the unique HTML element.

Class Selector

Class selector selects HTML elements class property value.The CSS class selector is defined with a period sign(.) immediately followed by the class value of the targeted HTML element. Please keep in mind that this rule will be applied more than one element at a time having the same class value of the HTML elements.

General Syntax

.features {
   color: #232323;
}

Source Code

Download 
.features {
   color: #232323;
   font-size: 20px;
   font-weight: 300;
   word-spacing: 3px;
   color: orange;
}

Code Explanation

Note:Please keep in mind that a similar class can be assigned to more than one HTML element. Hence, the CSS class selector is applied to more than one HTML element.

Descendant Selectors

Descendant Selectors selects those elements that are the descendant of another element.

General Syntax

ul.menu li a {
   text-decoration: none;
}

h1 em {
   color: green;
}

Source Code

Download 
ul.menu li a {
   text-decoration: none;
}

h1 em {
   color: green;
}

Code Explanation

Note:In the above example CSS descendant selectors have been used that select those elements that are the descendant of another element.

Child Selectors

A child selector is used to select the direct child element of some elements. This rule only applies to the direct child of any element and does not affect another element. Please keep in mind that the child selector is separated by greater than symbol(>).

General Syntax

ul > li {
   list-style: square;
}

Source Code

Download 
ul > li {
   list-style: square;
}

ul > li ol {
   list-style: none;
}

Code Explanation

Note: In the above example CSS child selector has been used that is separated by greater than symbol(>) and it is used to select those elements that are the descendant of another element and it is only applied to the direct children of the selected element.

The CSS Grouping Selector

Basically grouping selector selects all the HTML elements with the same style definitions.

General Syntax

h1,h3,p{
   text-align: center;
   color: #0c4271;
   font-size: 18px;
   font-weight: 500;
}

Source Code

Download 
h1,h3,p{
   text-align: center;
   color: #0c4271;
   font-size: 18px;
   font-weight: 500;
}

Code Explanation

Note: In the above example CSS a grouping selector is applied that selects all the HTML elements with the same style definitions.

Online Test / Quiz

Question set 1

Our Tutorials

Html Tutorial HTML
Css Tutorial CSS
Bootstrap 5 Tutorial BOOTSTRAP 5
Bootstrap 4 Tutorial BOOTSTRAP 4
Materialize CSS Tutorial MATERIALIZE CSS
Tutorials HTML CSS BOOTSTRAP 5 BOOTSTRAP 4
Performance Evalution HTML Quiz/Test CSS Quiz/Test Bootstrap 4 Quiz/Test Bootstrap 5 Quiz/Test
CSS Frameworks Materialize CSS Pure CSS UiKit CSS Bulma CSS
2021-22 © shapeyourpath.com