-1

I was looking through some code. I came across:

.social-navigation a[href*="tumblr.com"]:before {
    content: "\f214";
}

This code is used to display social media icons if a link contains tumblr.com in its url. However I have never seen the asterisk used in this way before in css. The only functionality I am aware an asterisk has in css, is the one of universal selector. This seems to do something else akin to a regular expression like: /.*tumblr\.com.*/g.

  • Can someone explain the functionality of the asterisk used in this example in more detail?

PS: A reference to documentation or a formal name of this functionality would be great. Then I can read up a little more on it and/or try to find more information on the internet.

Rob Monhemius
  • 4,822
  • 2
  • 17
  • 49
  • 1
    Most common CSS attribute selectors are: starts with `^=`, ends with `$=`, and contains `*=`. You can read more about these selectors here: https://www.w3schools.com/css/css_attribute_selectors.asp – Balázs Varga May 24 '18 at 11:37
  • asterisk selects all elements – mbadeveloper May 24 '18 at 11:39
  • 1
    Once I googled ` CSS attribute selector` it was easy to find. Thx Balász. – Rob Monhemius May 24 '18 at 11:41
  • @mbadeveloper Not in this context. – A.L May 24 '18 at 11:42
  • Possible duplicate of [What does an asterisk before an equal sign mean (\*=) ? What about the exclamation mark?](https://stackoverflow.com/questions/13525542/what-does-an-asterisk-before-an-equal-sign-mean-what-about-the-exclamatio) – A.L May 24 '18 at 11:49

2 Answers2

3

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

Balázs Varga
  • 1,797
  • 2
  • 16
  • 32
0

The * is part of the attribute selector operator *= : https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

So the * itself does not have any meaning or functionality. It is like the != operator in many languages: two characters making one operator.

Teun D
  • 5,045
  • 1
  • 34
  • 44
  • Please add an explanation in your answer. As it's written it doesn't explain the behaviour of the selector. – A.L May 24 '18 at 11:42
  • I think that is not the question posted. I think the original poster thought that the syntax here is `href* = "tumbler.com"`. The answer is that the operator here is `*=` and not `=` – Teun D May 25 '18 at 07:43
  • OP wrote "Can someone explain the functionality of the asterisk used in this example in more detail?". You answered to half of the question. – A.L May 25 '18 at 08:34