how to remove :before:fist-child with jquery?

hello,

i'm add pseudo element (::before) in .postmain and i want to remove pseudo element only in first .postmain, i try this jquery but not work.

Code:


$(function() {
$(".postmain::before:first").css("display", "none");
});


anybody help me, please

Hi @kumotta,

Unfortunately you cannot modify pseudo-elements like this, because they do not exist in the DOM -- only the stylesheet. So your best choice would be to hide it with CSS OR add a classname to the first instance of this element.

CSS

If this element is the first child of its parent you can use this method :

Code:

.postmain:first-child:before {
  display:none;
}

see :first-child : http://www.w3schools.com/cssref/sel_firstchild.asp


if it isn't the first child you can also try using nth-child :

Code:

.postmain:nth-child(1):before {
  display:none;
}

see :nth-child : http://www.w3schools.com/cssref/sel_nth-child.asp

It depends on the use case and where in the DOM your element is. I'd recommend looking over the selectors here :
http://www.w3schools.com/cssref/css_selectors.asp

JavaScript

As I said before you can also add a className to the element and hide it that way. For example :

Code:

$(function() {
  $(".postmain")[0].className += 'hidePseudo';
});

Then you can use the new class to hide your pseudo element :

Code:

.postmain.hidePseudo:before {
  display:none;
}

last solution working
thanks @Ange Tuteur
problem solved