CODEWITHSUNDEEP
javascriptjquerycss
Well Wisher
Well Wisher

Reputation: 1875

Adding a pseudo style from jquery

Am having a trouble with following code. The problem when adding the following style from jquery.

CSS

  .arrow_box {
position: absolute;
width: 24px;
border-radius: 30px 30px 3px 3px;
height: 17px;
float:left;
 }
.arrow_box:after {
border-color: rgba(136, 183, 213, 0);
border-top-color: #88b7d5;
border-width: 14px;
left: 0%;
 }

jQuery

<script type="text/javascript">
$(document).ready(function () {
    $('.arrow_box:after').css({
        "border-color": "red",
            "border-top-color": " #88b7d5",
            "border-width": "12px",
            "left": "0%"
    });
});
</script>

There will not have any jquery error but it is not working

Upvotes: 0

Views: 647

Answers (3)

Krasimir
Krasimir

Reputation: 13549

You can't directly do this with jquery. But here solution with pure javascript http://www.4pmp.com/2009/11/dynamic-css-pseudo-class-styles-with-jquery/

Upvotes: 2

Tushar Gupta - curioustushar
Tushar Gupta - curioustushar

Reputation: 57105

Pseudo elements are not DOM elements so you can not access them using JavaScript or jQuery.

Upvotes: 1

Mitya
Mitya

Reputation: 34628

Pseudo elements are not DOM elements targetable with JavaScript.

Upvotes: 1

Related Questions