Styles for all Globally pseudo element like :before?

Question

div{
width:100px;
height:100px;
border:1px solid #000;
display:inline-block;
position:relative;

}

div:before{
content:'';
display:block;
background:red;
width:100%;
height:100%;
position:absolute;
left:90%; top:0;
}

*:before{
background:blue;
}

<div><div>
<div><div>
<div><div>
<div><div>
<div><div>
<div><div>

I want to write a styles for all :before and after elements during an accessibility mode so i am not getting it.

For example: if we wanna write style for all elements we use- *{property:value;}

like that i want to write a style for all the :before and after elements a style .

*:before{
 background:blue;
 }

this code doesn't work.

Please help out.

Take a look here https://stackoverflow.com/questions/21032481/change-the-style-of-before-and-after-pseudo-elements — samb102, Mar 15 '19 at 09:35
It's done and also did the same on the answer you accepted ... you, did you read the duplicate question and found that it's not a duplicate? if yes, tell me why — Temani Afif, Mar 15 '19 at 10:26
yes i read my question is about pseudo class and how to apply styles for all of them once not about specifity of the divs and all. — Mohammed Rabiulla RABI, Mar 15 '19 at 10:28
@Temani Afif i think you read answer and marked my question as duplicate — Mohammed Rabiulla RABI, Mar 15 '19 at 10:30
no need to read the answer. You are asking why your code isn't working and the answer is about specifity thus the duplicate .. pseudo element play no role here, you will face the same issue even if you will target common elements. Your question is about an X requirement which a unique requirement and this requirement leads to an Y issue which is very known and common issue explained in the duplicate. We close the question based on Y not X — Temani Afif, Mar 15 '19 at 10:33
what ever i got solution for selecting all pseudo class do what ever you want. But i still wont agree your duplicate question no way relate to mine . — Mohammed Rabiulla RABI, Mar 15 '19 at 10:37

score 2 · Accepted Answer · edited Mar 15 '19 at 10:20

2

'*' is the universal selector that matches every element in your dom. It is possible to extend this selector call with pseudo selectors like :before and :after.

So you can use: *:before, *:after {...} See this example: https://codepen.io/anon/pen/vPRgmL

EDIT:

Your code does not work because of the specificity of your universal selector.

'div' has a higher specificity than '*' so div wins here. See more here: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

edited Mar 15 '19 at 10:20

Temani Afif

245,468
26
309
415

answered Mar 15 '19 at 09:30

Der Alex

718
3
16

thats not working – Mohammed Rabiulla RABI Mar 15 '19 at 09:31
Please see my updated answer. – Der Alex Mar 15 '19 at 09:45
So what you really want is to overwrite the styles for all pseudo selectors. If the selectors aren't nested too deep than you could use something like this: html body *:before { ... } – Der Alex Mar 15 '19 at 09:49
hey dude i didnt voted down some one else. ok what is not working i mentioned . how could u say that i voted – Mohammed Rabiulla RABI Mar 15 '19 at 09:50

Styles for all Globally pseudo element like :before?

1 Answers1