How Many Types Of Selectors Are There In CSS

admin_img Posted By Bajarangi soft , Posted On 29-09-2020

CSS stands for Cascading Style Sheets,CSS describes how HTML elements are to be displayed on screen, paper, or in other media,The selector points to the HTML element you want to style,The element selector selects HTML elements based on the element name,The element selector selects HTML elements based on the element name,The class selector selects HTML elements with a specific class attribute,The universal selector (*) selects all HTML elements on the page.

Selectors In Css

1. CSS element Selector

<!DOCTYPE html>
<html>
<head>
    <style>
        p {
            text-align: center;
            color: white;
        }
        .paral{
            background-color: blue;
            border: 2px solid red;
        }
        #para1 p{
            color:white;
        }
    </style>
</head>
<body>
<div class="paral">
<p>Every paragraph will be affected by the style.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</div>
</body>
</html>
2.CSS id Selector
<!DOCTYPE html>
<html>
<head>
    <style>
        #para1 {
            text-align: center;
            color: red;
        }
    </style>
</head>
<body>

<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>

</body>
</html>
3.CSS class Selector
<!DOCTYPE html>
<html>
<head>
    <style>
        .center {
            text-align: center;
            color: red;
        }
    </style>
</head>
<body>

<h1 class="center">Red and center-aligned heading</h1>
<p class="center">Red and center-aligned paragraph.</p>

</body>
</html>
4.CSS Universal Selector
<!DOCTYPE html>
<html>
<head>
    <style>
        * {
            text-align: center;
            color: blue;
        }
    </style>
</head>
<body>

<h1>Hello world!</h1>

<p>Every element on the page will be affected by the style.</p>
<p id="para1">Me too!</p>
<p>And me!</p>

</body>
</html>
5.CSS Grouping Selector
<!DOCTYPE html>
<html>
<head>
    <style>
        h1, h2, p {
            text-align: center;
            color:red;
        }
        body{
            background-color: #dbbd66;
        }
    </style>
</head>
<body>

<h1>Hello World!</h1>
<h2>How are You!</h2>
<p>How do you do...</p>

</body>
</html>

Related Post