Why Can't I Override Existing Pseudo-Elements

Why can't I override existing pseudo-elements?

Ok, to put this straight, after some reading, this is the specificity:

  • Id: 100
  • classes: 10
  • pseudo-classes: 10
  • pseudo-elements: 1
  • elements: 1

So that makes the first selector have a specificity of 22, and the 2nd of just 21. Apparently first-child seems to be a pseudo-class and not a pseudo-element.

Finally, adding a td before .other does the trick, since then document order takes precedence.

Why can't I override existing :after and :before pseudo-elements?

Important: Don't use !important.

When you need to reset a CSS rule that is set by another stylesheet use initial with a slightly stronger selector. If the CSS you are adding is loaded later than the one you're overwriting, use the same exact selector.

div.navigation-bar-wrapper:after,
div.navigation-bar-wrapper:before {
top: -10px;
left: initial;
right: 22px;
}

How do I override CSS set on a pseudo element?

As far as I can tell there is no other way than to override all properties. The styles are defined on the element, they won't just disappear because of another selector that targets the element.

If you only want to remove the pseudo element from the page you can do content: none.

Added from comments below:

The difference between content: "" and content: none is that content: "" produces a pseudo-element with no content (i.e. an empty pseudo-element), whereas content: none prevents the pseudo-element from being generated at all.

Override after pseudo element on matching element+element css

Note that the current updated question already does what OP is trying to achieve


You can use ::before pseudo element

Just FYI, you can style the pseudo elements (as I did)

.user {  background: red;  font-style: italic;}.message::before,.bot::before {  background: red;  font-style: italic;  position: relative;  left: -4px}.message::before {  content: ":";}.bot::before {  content: "=>";}
<span class="user">User1</span><span class="message">Hello</span><br /><span class="user">Bot</span><span class="bot">Hello</span>

::selection pseudo selector ignoring ::before pseudo element

You can use a data attribute on the "html line" classed span, this prevents the number from appearing in the selection in Chrome. The downside to this is you'll lose the CSS counter to auto-increment the line numbers:

<div class="js html container" data-clipboard-target="#\<h1\>">
<code class="html syntax" id="<h1>">
<span class="html line" data-pseudo-content="1">
<span class="html comment"><!-- Heading level 1 --></span>
</span>
<span class="html line" data-pseudo-content="2">
<<span class="html tag">h1</span>>Heading level 1<<span class="html tag">/h1</span>>
</span>
</code>
</div>

https://jsfiddle.net/ohyj81c4/

Lines with data-attributes selected on Chrome

ref https://danoc.me/blog/css-prevent-copy/

The reason you can't change the pseudo element selection colour is because you can only use 1 pseudo-element in a selector. Both ::selection and ::before come under this definition, rather than ::selection being a pseudo-class like :active, :visited etc.

ref: https://developer.mozilla.org/en/docs/Web/CSS/Pseudo-elements

first-letter pseudo element overriding higher specificity rules

This is not a specificity issue. You are simply dealing with different elements here - granted, one of them is just a pseudo element, but still.

Specificity only comes into play when several rules are matching the same element(s) - not the case here.

It is pretty much the same as if you had the following:

html .red { /* html in front to increase specificity */  color: red;  background-color: grey;}
.first-letter { /* replaced pseudo element with a class and a "real" element here */ color: orange; background-color: black;}
<div class="red"><span class="first-letter">R</span>ED</div>

Pseudo element ignore/override overflow hidden property

Unfortunately pseudo elements can't ignore the overflow property of their parents.

A good way to go around it is by creating a Parent for the property that should be outside of the element (in your case the Border) and give the child the overflow:hidden

CSS

.social-icons li a {
overflow: hidden;
position: relative;
width: 70px;
height: 70px;
border-radius: 50%;
background: #fa0546;
box-shadow: 0 2px 16px rgba(250, 5, 70, 0.5);
font-size: 33px;
line-height: 70px;
color: #eaeaea;
transition: all 0.3s ease;
text-shadow:0px 0px 0px rgb(213, 0, 33) ,
1px 1px 0px rgb(215, 0, 35) ,
2px 2px 0px rgb(216, 0, 36) ,
3px 3px 0px rgb(218, 0, 38) ,
4px 4px 0px rgb(219, 0, 39) ,
5px 5px 0px rgb(221, 0, 41) ,
6px 6px 0px rgb(222, 0, 42) ,
7px 7px 0px rgb(224, 0, 44) ,
8px 8px 0px rgb(225, 0, 45) ,
9px 9px 0px rgb(227, 0, 47) ,
10px 10px 0px rgb(228, 0, 48) ,
11px 11px 0px rgb(230, 0, 50) ,
12px 12px 0px rgb(232, 0, 52) ,
13px 13px 0px rgb(233, 0, 53) ,
14px 14px 0px rgb(235, 0, 55) ,
15px 15px 0px rgb(236, 0, 56) ,
16px 16px 0px rgb(238, 0, 58) ,
17px 17px 0px rgb(239, 0, 59) ,
18px 18px 0px rgb(241, 0, 61) ,
19px 19px 0px rgb(242, 0, 62) ,
20px 20px 0px rgb(244, 0, 64) ,
21px 21px 0px rgb(245, 0, 65) ,
22px 22px 0px rgb(247, 2, 67) ,
23px 23px 0px rgb(248, 3, 68) ,
24px 24px 0px rgb(250, 5, 70);
}

.border {
width: 70px;
height: 70px;
border-radius: 50%;
border: 5px solid rgb(227, 0, 47);
transition: all 0.3s ease;
overflow: hidden;
}

.border:hover a {
transform: scale(0.8);
}

.border:hover {
transform: scale(1.1);
}

HTML

  <ul class="social-icons">
<li>
<div class="border">
<a href="#" target="_blank" class="fab fa-facebook-f"></a>
</div>
</li>


Related Topics



Leave a reply



Submit