How to use selector attribute with pseudo elements?

Question

I have a number of CSS categories1-n and I have the following code to assign attributes to all of them: [class*="parentcategory"] { float: left; }

Now some of them also have pseudo elements of ::before and ::after, .e.g .parentcategory1::before and I struggle to assign attributes generally to all of these because I have the category number between "parentcategory" and e.g. "::before"

Is there a way to solve this?

Many thanks

David

Jon Uleis · Accepted Answer · 2018-02-06 21:10:26Z

1

Seems to work just fine like so. Any issues with this?

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

[class*="parentcategory"]::before {
  color: black;
  content: '::before';
}

<div class="parentcategory1">
  parentcategory1
</div>

<div class="parentcategory2">
  parentcategory2
</div>

answered Feb 6, 2018 at 21:10

Jon Uleis

18.9k3 gold badges36 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

AlphaX Over a year ago

E P I C - that did the trick indeed! Thank you so much, that's really helpful!

Collectives™ on Stack Overflow

How to use selector attribute with pseudo elements?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related