What Does an Asterisk Do in a CSS Property Name

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.

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 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/

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 does asterisk before class mean?

There is no difference between them at all. If you don't specify an element type, like div or p, then whether you have * or not doesn't matter. Even if you leave it out, it's implied that you want to match any element so long as it has the class some_class. From the spec:

If a universal selector represented by * (i.e. without a namespace prefix) is not the only component of a sequence of simple selectors selectors or is immediately followed by a pseudo-element, then the * may be omitted and the universal selector's presence implied.

Examples:

• *[hreflang|=en] and [hreflang|=en] are equivalent,
• *.warning and .warning are equivalent,
• *#myid and #myid are equivalent.

What you're describing in terms of elements being inside other elements only applies when * is separated from the class by a space, e.g. * .some_class. That would match an element with the class some_class only if it's inside another element (basically this means it will never match the root element).

And taking the above explanation about * being implied, this would make the selector with the space also equivalent to * *.some_class. Here you can see that two universal selectors are in use, separated by a combinator. The second one just happens to be optional because it's already qualified by the class selector (the first one is not optional because it exists on its own).

When the name of a css class in Chrome DevTools is only an asterisk, what does the asterisk mean?

* is a 'wildcard' meaning it matches everything.

Reference:

• MDN Universal selectors

Strange CSS code, Brackets and Asterisk

Attribute Selector: (the selector with square braces)

This - [class*="col-"] is called as an attribute selector. It is used to select an element based on an attribute and its value. In this case it selects all elements whose class contains col-. So, it would apply the style to .col-1, .col-2, .col-3 etc.

From the W3C Spec: (Section 6.3.2. Substring matching attribute selectors)

[att*=val]

Represents an element with the att attribute whose value contains at least one instance of the substring "val". If "val" is the empty string then the selector does not represent anything.

^{(emphasis is mine)}

Universal Selector: (the styles which are under *)

The * selector is called as the universal selector and it is used to select and apply given styles to all elements.

From the W3C Spec:

The universal selector, written as a CSS qualified name [CSS3NAMESPACE] with an asterisk (* U+002A) as the local name, represents the qualified name of any element type. It represents any single element in the document tree in any namespace (including those without a namespace) if no default namespace has been specified for selectors. If a default namespace has been specified, see Universal selector and Namespaces below.

In your code, there are some styles which are column to all three col-* classes whereas the width is different. So, the [class*="col-"] selects elements with one of those three classes and adds the common styling to them whereas the individual .col-1, .col-2, .col-3 selectors apply the width specific to each class.

* { /* select and apply these styles to ALL elements */
  box-sizing: border-box;
}

[class*="col-"] { /* select all elements whose class contains col- */
  float: left;
  padding: 15px;
  border: 1px solid red;
}

/* select elements with specific class */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}

It is more like a regex for selector but you should be careful while using them because [class*="col-"] will also select an element whose class='fevicol-is-an-adhesive' like in the below snippet.

[class*="col-"] {  color: red;}

<h3>Items that will be selected</h3><div class='col-1'>Column 1</div><div class='col-2'>Column 2</div><div class='col-3'>Column 3</div><div class='fevicol-is-an-adhesive'>Fevicol is an adhesive</div>
<h3>Items that will not be selected</h3><div class='cols-1'>Column 1</div><div class='col2'>Column 2</div><div class='column-3'>Column 3</div><div class='fevicol'>Fevicol is an adhesive</div>

<label class="required">Name:</label>
<input type="text">

<style>
  .required:after {
    content:" *";
    color: red;
  }
</style>

.required:after {  content:" *";  color: red;}

<label class="required">Name:</label><input type="text">