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/
What does an asterisk before the CSS background-color mean?
The *background question:
.classABC {
background: #000; /* modern browsers */
*background: #333; /* IE 7 and below */
_background: #FFF; /* IE6 exclusively */
}
It is used for older IE versions.
The background-repeat question:
It has no particular use here.
As you seem to know, it repeats images along the x-axis. Maybe there are pictures applied to the element/child elements where it is needed.
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).
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.
What asterisk functionality is used in `a[href*=`?
Most common CSS attribute selectors are:
starts with ^=
ends with $=
and contains *=
You can read more about css attribute selectors here: https://www.w3schools.com/css/css_attribute_selectors.asp
What does an asterisk before an equal sign mean (*=) ? What about the exclamation mark?
!
is part of !important
; it is not a comment. The !important
forces a rule to always be applied. It's typically used to override or to prevent your style from being overridden.
The *=
means "contains". So in the example, the first line is looking for all children of .nav li ul li a
elements with classnames that contain "icol-".
can anyone explain why we use * in css?
*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.
Related Topics
How to Position Div Below Another Div
Formatting Numbers (Decimal Places, Thousands Separators, Localization, etc) With CSS
Split Div into 2 Columns Using CSS
Css Customized Scroll Bar in Div
How to Place Two Divs Next to Each Other
Floating Elements Within a Div, Floats Outside of Div. Why
How to Change Color Property of Mat-Slide-Toggle/ Overwrite CSS of Component
How to Set the Width of Select Box Options
Add Footer Text in Each Page of Pdf Using CSS
How to Set the Size of a Column in a Bootstrap Responsive Table
Why It Is Not Taking 100% Height in Material Design
How to Change Paper Size in Headless Chrome - Print-To-Pdf
How to Create a Flexible Vertical Line in Between Two Divs
How to Use HTML to Print Header and Footer on Every Printed Page of a Document
How to Change Colour of Blue Highlight on Select Box Dropdown