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;
}