What Does an Asterisk (*) Do in a CSS Selector

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

CSS Rule, Never seen before

* affects (I should say "represents the qualified name of") all elements. Per spec:

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

CSS How do you select all elements of certain type within a div?

.container > * {flex-basis: 100%;} 

* selector, literally means select all the children in the container and set a particular CSS on them.
From GeeksForGeeks:

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.

Please refer https://www.geeksforgeeks.org/what-is-the-use-of-asterisk-selector-in-css/

And > is called the child selector. As per GeeksForGeeks:

Child Selector: Child Selector is used to match all the elements which
are child of a specified element. It gives the relation between two
elements. The element > element selector selects those elements which
are the children of specific parent. The operand on the left side of >
is the parent and the operand on the right is the children element.

Please refer this article from GeeksForGeeks for better understand and best way to check them is by practice and observing yourself how they differ.

https://www.geeksforgeeks.org/css-child-vs-descendant-selectors/

Effect of an asterisk in a jQuery selector

Okay, thanks to the comments above, I understand what was happening.

#right means find the element with an id of 'right'. It will never return more than one element.

*#right means find any element with an id of 'right', in the same way as div#right means find any div with that id. It will return more than one element if there are more than one elements with that id. (There shouldn't be, but Chrome at least lets you do this.)

* #right means find the element with an id of 'right' that is also a descendant of another element. It will also return more than one element if there are more than one elements with that id.

Although the last case might seem redundant, it wouldn't match anything if the 'html' element was the only one that had an id of 'right'.

---

Related Topics