Css: What This Asterisk (*) Does

What does an asterisk (*) do in a CSS selector?

It is a wildcard, this means it will select all elements within that portion of the DOM.

For example, if I want apply margin to every element on my entire page you can use:

* {
    margin: 10px;
}

You can also use this within sub-selections, for example the following would add a margin to all elements within a paragraph tag:

p * {
    margin: 10px;
}

Your example is doing some css trickery to apply consecutive borders and margins to elements to give them multiple coloured borders. For example, a white border surrounded by a black border.

CSS: What this Asterisk (*) does?

#globalnav[class*="nosearch"]

means: class contains "nosearch"

---

#globalnav[class^="nosearch"]

means: class starts with "nosearch"

---

#globalnav[class$="nosearch"]

means: class ends with "nosearch"

---

Reference:
http://reference.sitepoint.com/css/css3attributeselectors

Purpose of asterisk before a CSS property

It is a browser specific CSS hack for versions 7 or below of Internet Explorer.

*property: value

Although Internet Explorer 7 corrected
its behavior when a property name is
prefixed with an underscore or a
hyphen, other non-alphanumeric
character prefixes are treated as they
were in IE6. Therefore, if you add a
non-alphanumeric character such as an
asterisk (*) immediately before a
property name, the property will be
applied in IE and not in other
browsers. Unlike with the hyphen and
underscore method, the CSS
specification makes no reservations
for the asterisk as a prefix, so use
of this hack could result in
unexpected behavior as the CSS
specifications evolve.

*property: value applies the property value in IE 7 and below. It may or may
not work in future versions. Warning:
this uses invalid CSS.

From: http://www.javascriptkit.com/dhtmltutors/csshacks3.shtml

What does an asterisk do in a CSS property name?

It is a syntax error. So in CSS, it makes the property name invalid and stops it being parsed.

Thanks to bugs in browsers, it is sometimes ignored. This effectively causes the property to apply only to browsers featuring that particular bug — IE7.

In general, it should be avoided in favour of conditional comments.

What does an asterisk mean next to a CSS property?

It's a CSS hack. Only IE7 and below will recognize it.

I wouldn't recommend using it. Instead, use IE conditional comments to render a different class name for the BODY tag depending on the version of IE being used.

When I have to deal with old versions of IE, I use a method similar to this:

http://nicolasgallagher.com/better-conditional-classnames-for-hack-free-css/

CSS Universal selector (*) specificity

The universal selector (*) has no effect on specifity, therefore the latter selector's styles will be the ones that are applied.

An asterisk (*) is the universal selector for CSS. It matches a single
element of any type. Omitting the asterisk with simple selectors has
the same effect. For instance, *.warning and .warning are considered
equal.

What does * mean in CSS?

This is a common technique called a CSS reset. Different browsers use different default margins, causing sites to look different by margins. The * means "all elements" (a universal selector), so we are setting all elements to have zero margins, and zero padding, thus making them look the same in all browsers.

What does a start(*) in CSS mean

The * (Asterisk) symbol in a CSS file, when used after a class name, or any other identifier, will select all descendants/children inside that element.

For example, if we have this HTML document:

<div class="container">
    <div class="square">
    <div class="square">
</div>
<div class="container">
    <div class="circle">
    <div class="circle">
</div>

To select just the .container divs, the following CSS can be used:

.container
{
   /*Styling*/
}

To select just the .square inside the .containers then use:

.container .square
{
    /*Styling for squares*/
}

To select all the elements that are inside the .containers then use:

.container *
{
    /*Styling for squares, circles, rectangles and everything else you can think off*/
}

For further information, see the W3C reference on the Universal Selector:

http://www.w3.org/TR/selectors/#universal-selector

And also the Mozilla Dev Network:

https://developer.mozilla.org/en-US/docs/Web/CSS/Universal_selectors

---

Related Topics