CSS Selectors Every Web Designer Should Know

CSS Selectors Every Web Designer Should Know

CSS selectors are an important topic of CSS define how to select HTML element by different CSS selectors such as element selector, class selector, group selector, etc. CSS selectors are mandatory to learn for beginners in the right way. If beginners know when to use which selector, they can reduce unwanted lines of code in CSS. There is several CSS selectors, some of the following : 

 

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

Syntax :  

element-name
{
    property : value
}

Example : 

 HTML :
<p>web designing</p>
<p>web development</p>
<p>graphic design</p>
CSS :
p
{
color:red
}

Element selector is used to select all specific HTML elements, e.g. select all paragraphs, select all headings etc. It is mainly used in the website, such as to mention equal font size or font family of paragraph for website etc.

 

2. Class Selector : The class selector is used to select a specific HTML element, which contains a class attribute. It is a reusable selector.

Syntax :

 

.classname

{

Property : value

}

Example :

HTML
<div class="box"></div>

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

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

Syntax

Firstelement, Secondelement…

Example :Remove symbol and number from list

HTML
<ul>
<li>Web Design</li>
<li>Web Development</li>
<li>Web Design</li>
<li>Web Development</li>
</ul>
CSS
ul,ol
{
list-style:none;
}

4. Descendant Selector : Descendant Selector is used to select an element on behalf of its parent, or we can say that we can select an element by its parent name. It is useful when we have to select any child of a specific parent element such as all lists of ul or all paragraphs of a particular div.

 

Syntax :

parent-element child-element

{

}

Example: select all li of  particular div

HTML

<ul class="list1">
<li>list1</li>
<li>list2</li>
<li>list3</li>
<li>list4</li>
<li>list1</li>
</ul>

CSS

.list1 li
{
color:#000;
}

Categories: web designing css

Trending Courses

CodeIgniter

Regular : 45 Days

Fastrack : 20 Days

Crash : 10 Days

Advance Digital Marketing

Regular : 6 Months

Fastrack : 3 Months

Crash : 2 Months

React JS

Regular : 45 Days

Fastrack : 25 Days

Crash : 15 Days

Laravel

Regular : 45 Days

Fastrack : 20 Days

Crash : 10 Days

Front End Developer

Regular : 6 Months

Fastrack : 4 Months

Crash : 2 Months

Related Blogs

Request For Demo