(4) CSS Group Selectors
In CSS, you can also give the same style in any Html element just need to write the style at once. You just need to select the all the Html element at once and give them style which you want. This type of selection is done by Group Selectors. In simple words, you can style many Html elements just to select them at once. You don’t need to write style for all Html elements.
Let Us See through an example:-
In this example, we will show you that how one style sheet will style on all the Html elements with the help of group selectors.
Example:-
<head>
<title> CSS Selectors </title>
</head>
<style>
p, h1, h2, span {
font: 120px;
Color: red;
Background-color: Yellow;
border: 2px solid green;
}
</style>
<body>
<h1> This is a 1st Heading. </h1>
<p> Lorem, ipsum dololoam hic minus ducimus? Deserunt commodi eaque sit expedita. </p>
<span> This is a Span.</span>
<h2>This is 2nd heading. </h2>
<p>Lorem ipsum dolor oloremque consequatur repellendus magni? Reprehenderit aut asperiores id?</p>
</html>
Output :-
As you can see in the above example how all the Html elements group together and once CSS properties will apply to all of them.
(5) CSS Universal Selectors
CSS Universal Selectors is used when you want apply a particular CSS properties to all the html elements.
Let’s see through an example :-
<head>
<title> CSS Selectors </title>
</head>
<style>
* {
background-color: rgb(207, 107, 107);
}
</style>
<body>
<div> <p> This is a Paragraph inside Div Container.</p> </div>
<p> This is a Paragraph Outside the Div Container.</p>
<div> <span> This is a Span tag inside the Div Container. </span></div>
<div> <textarea> Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit, esse?
</textarea></div>
<div> Lorem ipsum dolor sit amet consectetur adipisicing elit. Error, debitis? Lorem ipsum
dolor sit amet consectetur, adipisicing elit. Error recusandae dolore eius eum asperiores?</div>
</html>
Output :-
In this example, we have applied the background-color CSS property to all the Html elements that why the background color of all the Html elements will change. But you can use a universal selector in many different ways. Let’s see through an amazing example.
Example: -
<head>
<title> CSS Selectors </title>
</head>
<style>
div * {
background-color: rgb(207, 107, 107);
}
</style>
<body>
<div> <p> This is a Paragraph inside Div Container.</p> </div>
<p> This is a Paragraph Outside the Div Container.</p>
<div> <span> This is a Span tag inside the Div Container. </span></div>
<div> <textarea> Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit, esse?</textarea></div>
<div> Lorem ipsum dolor sit amet consectetur adipisicing elit. Error, debitis? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Error recusandae dolore eius eum asperiores?</div>
</html>
Output :-
In the above example, we saw that how we used the universal selector for the elements which is inside the div containers. The CSS property only applies to the elements which are inside the div containers. It doesn’t affect the other elements which are outside the div container.
Hope you all understand. If you still have any problem regard this, then tell us by commenting below, we will definitely try to solve the problem.
0 comments:
Post a Comment