CSS Selectors Every Web Designer Should Know

css selectors in an important part or topic of css , it defines how to select html elment by different different css selectors such as element selector, class selector, group selector  etc. css selectors is mandatory to learn for beginners in right way because , if beginners know when to use which selector then he can reduce unwanted line of code in css. There are number of css selectors, some of following : 

1. Element Selector : As its name tells about itself , Select any html element by its name.

Syntax :  

element-name
{
    property : value
}

Example : 

HTML : 

web designing

web development

graphic design

CSS :

p
{
   color:red;
}


Element selector is used to select all specific html element ,e.g select all paragraph, select all headings etc. It is mostly used in website such as to mention equal font size or font family of paragraph for website etc.

 

2. Class Selector : Class selector is used when we want to select specific html element, which contains class attribute. It is reuseable selector.

 

Syntax :

 

.classname

{

Property : value

}

 

Example : 
HTML
 
 
CSS :
.box
{
  width: 300px;
height:300px;
background:#f00;
}

3. Group Selector :  Group Selector is used to select group of elements or we can say that we can select more than one element at time, it helps when we have to use same properties in two or more different elements such as we have to remove symbol from ul and ol. Group Selector is denoted by (,) symbol.

Syntax

Firstelement, Secondelement…

Example :  Remove symbol and number from list
HTML
 
  • Web Design
  • Web Development
 
 
  • Web Design
  • Web Development
 
 
CSS
ul,ol
{
list-style:none;
}

4. Descendant Selector : Descendant Selector is used to select element on behalf of its parent or we can simply say that we can select element by its parent name. It is useful when we have to select  any child of specific parent element  such as all list of ul or all paragraph of particular div etc.

Syntax :

parent-element child-element

{

}

Example : select all li of  particular div
HTML
 
 
  • list1
  • list2
  • list3
  • list4
 
 
 
 
 
  • list1
  • list2
  • list3
  • list4
 
 
 
CSS
.list1 li
{
  color:#000;
}

 

Request a Demo

Whatsapp