What is the use of asterisk (*) selector in CSS ?
The asterisk (*) is known as the CSS universal selectors. It can be used to select any and all types of elements in an HTML page. The asterisk can also be followed by a selector while using to select a child object. This selector is useful when we want to select all the elements on the page.
For example:
* {
property : value;
}
While selecting elements, if we use just asterisk (*), then all the elements of the HTML page gets selected irrespective of the parent-child relation. If we use the asterisk (*) while selecting children of a particular parent, so we can select all the children of that parent by:
parent * {
property : value;
}
We can use an asterisk (*) for intermediate level while selecting an element by:
grand_parent * grand_child{
property : value;
}
Examples:
Input: * { color : green; }
Output: The text in all the elements become green
Input: * p { color : green; }
Output: The text inside those which are direct children of any elements of HTML the page will become green.
html
<!DOCTYPE html><html><head> <style> * { background-color: gray; } * p { background-color: green; } * p span { background-color: yellow; } div * h3 { background-color: red; } </style></head><body> <center> <h1 style="color:green"> GeeksforGeeks </h1> <div> <p> div->p <span> div->p->span </span> </p> <span> <h3> div->span->h3</h3></span> </div> <p>A computer science portal.</p> </center></body></html> |
Output:
Supported Browser:
- Google Chrome 4.0
- Internet Explorer 7.0
- Firefox 2.0
- Opera 9.6
- Safari 3.1
Please Login to comment...