Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

is it possible to add class to a pseudo element?

Tags:

javascript

css

I guess not as this is not working:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" >
 $("p:after").addClass("allgone");
</script>
<style type="text/css">
p:after {
 content: "daniel";
}
.allgone{
display: none;
}
</style>
<title></title>
</head>
<body>
<p></p>
</body>
</html>

JSFIDDLE

like image 788
daniel.tosaba Avatar asked Feb 08 '12 22:02

daniel.tosaba


People also ask

Can pseudo-elements and pseudo-classes be combined?

There are no special rules around combining pseudo-classes and pseudo-elements, besides the one rule that says there can only be one pseudo-element per complex selector and it must appear at the very end.

Can you combine pseudo-classes?

If you're talking about pseudo-classes, then yes, you can combine them in any order.

Is there a class before pseudo?

In CSS, ::before creates a pseudo-element that is the first child of the selected element. It is often used to add cosmetic content to an element with the content property. It is inline by default.

Can you have multiple pseudo-elements?

Multiple pseudo-elements can be created with the ::before(ordinal) and ::after(ordinal) notation, where 'ordinal' is a positive integer. ::before pseudo-elements are ordered descending by 'ordinal' from the host element's content edge.


2 Answers

No, but you can add the class to the p element, and create an alternate style for it.

p:after {
    content: "daniel";
}
p.allgone:after {
    display: none;
}

$('p').addClass('allgone');

http://jsfiddle.net/xGUaY/

like image 79
user1106925 Avatar answered Sep 29 '22 12:09

user1106925


No, pseudo elements are not part of the DOM, and they can not be accessed via JavaScript.

I believe they are part of the Shadow DOM. The pseudo element is rendered by the browser as an inline element inside of the containing element, either as the first or last child.

like image 23
alex Avatar answered Sep 29 '22 11:09

alex