How to use selectors in css for web design

Posted By : Vikas Pundir | 21-Aug-2018

css

What is the Selector and how to use in CSS

Selectors are used to selecting elements on a web page for styled. In CSS selectors are one of the major aspects. In various ways, you can define selectors.

Here is the list of selectors -

1. Universal Selector

2. Element Type Selector

3. Id Selectors

4. Class Selectors

5. Descendant Selectors

6. Child Selectors

Universal Selector:

The universal selector is defined by an * i.e. star or asterisk symbol. Universal selector is written as * that are used for matches every single element on the page. If other conditions exist on the target element the universal selector may be omitted. For removing the default margins and paddings from the elements this selector is often used and also for a quick testing purpose.

<html lang="en">
<head>
  <title>Universal selector</title>
  <style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }
  </style>
</head>
<body>
  <h1>This is heading</h1>
  <p>This is a paragraph.</p>
</body>
</html>

Inside the * selector style(margin: 0; padding: 0;) will be applied on every element in a document.

Element Type Selector:

With the corresponding element type name, This type of selector matches every instance of the element in the document tree.

HTML:

<h1>This is heading</h1>
  <p>This is a paragraph.</p>

CSS:

    h1 {
      color: red;
    }
    p {
        color: red;
    }
  </style>

In this example the p selector only applied on every <p> element and text color will be red.

Id Selectors:

Define style rules for a single or unique element the id selector is used and defined with a hash sign (#).

HTML:
<p id="error">This is a Heading!</p>

CSS:
    #error {
        color: #ff0000;
    }

The id attribute is set to an error that renders the text of an element in red.

Class Selectors:

Basically the HTML element that has a class attribute is select by class selectors. All the elements having their class according to the defined rule.

This selector defined by a period sign (.) followed by the class value.

HTML:
<h1 class="blue">This is a heading</h1>
  <p class="blue">This is a paragraph.</p>
  <p>This is second paragraph.</p>

CSS:
.blue {
        color: #0000ff;

In this example, the text color is blue because element in the document has a class attribute set blue.

Descendant Selectors:

When you want to select an element in HTML code that is descendant of another element so descendant selectors are used. For example, we create an unordered list of menu and we want to select only anchors elements that are contained within an unordered list, rather than selecting all anchor elements.

HTML:
<h1>This is a <em>heading</em></h1>
<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li> 
                <li><a href="#">Services</a></li>
                <li><a href="#">Contact</a></li>
</ul>

CSS:
h1 em {
color: blue;
}
    ul.menu {
        padding: 0;
        list-style: none;
}
    ul.menu li{
        display: inline;
}
ul.menu li a {
margin: 10px;
text-decoration: none;
}

In this example, ul.menu li selector applied to only anchor <a> elements that inside an unordered list having a .menu class, and other links no effect inside the document. Similarly, h1 em selector will be applied only on <em> elements that contained inside heading <h1>.

Child Selectors:

When you select elements that are the direct children of some element. Using greater than symbol (i.e. >) separated a child selector is made up of two or more selectors. For example, if a nested list has more than one level so you can use these selectors to select the first level of list elements.

HTML:
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li> 
<li>
<a href="#">Services</a>
<ol>
<li><a href="#">Design</a></li>
<li><a href="#">Development</a></li>
</ol>
</li>
<li><a href="#">Contact</a></li>
</ul>

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

In this example, without any effect on other list elements selector, ul > li applied only on <li> elements and this element are direct children of the <ul> elements.