CSS Tutorial

CSS Style

CSS Layout Style

CSS Float Style

CSS Reference

CSS Universal Selector


What is Universal Selector?

Universal Selector match all element type. It's work like global to select all element.
Universal Selector identify by asterisk (*).
Universal selector use when you want to select specific type element to apply CSS style.

Browser Compatibility

  • Google Chrome 2+
  • Mozilla Firefox 1+
  • Internet Explorer 8+
  • Opera 9.2+
  • Safari 1.3+

Note: Here details of browser compatibility with version number may be this is bug and not supported. But recommended to always use latest Web browser.

Syntax

This syntax apply to select every element in a document.

* {
	property: value;
	property: value;
	...
}

Example:

Select all element to apply font size 24 pixel.

<style type="text/css">
* {
   font-size:24px;
}
</style>
</head>
<body>
<p>This is paragraph text</p>
<h1>This is h1 heading text</h1>
<h3>This is h3 heading text</h3>
</body>

Run it...   »

Example Result:

Example:

In this example selector *.demo and .demo both are equivalent,

.demo {
	font-size:24px;
}

Run it...   »

*.demo {
	font-size:24px;
}

Run it...   »

Same as *#demo and #demo both are equivalent.

Example:

Select all element whose have child of an <ul> element.

<style type="text/css">
    ul * {
         background-color:#FF0000;
    }
</style>
</head>
<body>
    <ul type="list" >
        <li>This is first list item.</li>
        <li>This is second list item.</li>
        <li>This is three list item.</li>	
    </ul>
</body>

Run it...   »

Example Result: