0

Can anyone explain to me, please, what the following CSS selector will target? 

[role*=user] > article a:not([href^=stage]) { 
    /* some rules here */ 
}
lenilsondc
  • 9,590
  • 2
  • 25
  • 40
JohnBo
  • 11
  • 1
  • 2
  • Also related but not a duplicate: https://stackoverflow.com/questions/1204275/what-does-an-asterisk-do-in-a-css-selector – TylerH Sep 20 '18 at 16:37

1 Answers1

2

The selector is targetting any anchor tag [a] which its href attribute doesn't start with stage [:not([href^=stage])]; that, is inside the an article, which is a direct child > of an element on which its role attribute contains user.

In the example bellow I styled the targets with a pinky color so that it can give an idea of what elements are selected by that:

[role*=user] > article a:not([href^=stage]) { 
    color: fuchsia;
}
<div role="user">
  <article>
    <a href="stage">loren</a> ipsum dolor <a href="not-stage">sit amet</a>
  </article>
</div>
lenilsondc
  • 9,590
  • 2
  • 25
  • 40