How to apply jQuery on css selector :before

Question

Here is my scenario, Created a div with CSS and added a X on top-right with before pseudo-class. How can I close this div by clicking on X with the help of javascript ?

CSS

.validation-summary-errors{
    position: absolute;
    width: 260px;
    padding: 20px;
    box-sizing: border-box;
    top: 50%;
    left: 50%;
    background-color: #fff;
    text-align: center;
    font-size: 14px;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    border-radius: 4px;
    border: #000 solid 1px;
    box-shadow: #232323 1px 1px 6px;
}

.validation-summary-errors:before {
    display: block;
    content: "X";
    position: absolute;
    right: -15px;
    top: -15px;
    background-color: rgba(0, 0, 0, 0.85);
    padding: 5px;
    border-radius: 50%;
    font-size: 16px;
    color: #fff;
    width: 29px;
    box-sizing: border-box;
}

HTML in View (Edit)

 <div class="message-error">  

                            @validationSummary

                    </div>

pseudo-class are not part of the DOM so you can not add event listeners. — Alex Char, Aug 12 '16 at 09:56
`:before` is an pseudo element and cannot be accessed in the DOM! — Pugazh, Aug 12 '16 at 09:56
See [this](http://stackoverflow.com/questions/5041494/selecting-and-manipulating-css-pseudo-elements-such-as-before-and-after-usin). — JD Angerhofer, Aug 12 '16 at 09:57
Have a `span` or `div` with those style and use it's `click` event. — Pugazh, Aug 12 '16 at 09:58

Pugazh · Accepted Answer · 2016-08-12T10:17:00.410

:before is an pseudo element and cannot be accessed in the DOM. Instead have a span or div with those style and use it's click event.

Note: Just make sure that you defined the CSS for span.close :-)

Solution 1: If you can edit the HTML.

$(function() {
  $('.close').click(function() {
    $(this).parent().hide();
  });
});

.validation-summary-errors {
  position: absolute;
  width: 260px;
  padding: 20px;
  box-sizing: border-box;
  top: 50%;
  left: 50%;
  background-color: #fff;
  text-align: center;
  font-size: 14px;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  border-radius: 4px;
  border: #000 solid 1px;
  box-shadow: #232323 1px 1px 6px;
}
span.close {
  cursor: pointer;
  display: block;
  content: "X";
  position: absolute;
  right: -15px;
  top: -15px;
  background-color: rgba(0, 0, 0, 0.85);
  padding: 5px;
  border-radius: 50%;
  font-size: 16px;
  color: #fff;
  width: 29px;
  box-sizing: border-box;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="validation-summary-errors">
  This specified email already exists
  <span class="close">X</span>
</div>

Solution 2: If HTML is created dynamically.

$(function() {
  $('.validation-summary-errors').append('<span class="close">X</span>');

  $('.validation-summary-errors').on('click', 'span.close', function() {
    $(this).parent().hide();
  });
});

.validation-summary-errors {
  position: absolute;
  width: 260px;
  padding: 20px;
  box-sizing: border-box;
  top: 50%;
  left: 50%;
  background-color: #fff;
  text-align: center;
  font-size: 14px;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  border-radius: 4px;
  border: #000 solid 1px;
  box-shadow: #232323 1px 1px 6px;
}
span {
  cursor: pointer;
  display: block;
  content: "X";
  position: absolute;
  right: -15px;
  top: -15px;
  background-color: rgba(0, 0, 0, 0.85);
  padding: 5px;
  border-radius: 50%;
  font-size: 16px;
  color: #fff;
  width: 29px;
  box-sizing: border-box;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="validation-summary-errors">
  This specified email already exists
</div>

A working example is what was missing from other comments/answers. +1 — Jeremy Thille, Aug 12 '16 at 10:03
my div `validation-summary-errors` is creating dynamically, how to insert `span` — Mangrio, Aug 12 '16 at 10:09

score 3 · Answer 2 · answered Aug 12 '16 at 10:15

3

You can use the pointer-events css attribute to ignore clicks on the parent, and not on the pseudo element. That way you can have a click listener on the parent which will only be triggered by the pseudo element.

This will be a problem if you need to allow pointer events for another reason on the parent of course.

fiddle

answered Aug 12 '16 at 10:15

peternyc

581
3
8

Ya could be good enough, the downside is that you can no more bind any mouse event to this element and btw can bring some other issue because e.g click would pass throught it. So user could click something he doesn't see/expect. But for this issue, wrapping element inside a container capturing mouse events could fix it, still guessing. – A. Wolff Aug 12 '16 at 10:24

score 1 · Answer 3 · answered Aug 12 '16 at 09:59

1

pseudo elements are not in the DOM. You can read it thanks to the getComputedStyle method, but not manipulate it.

Instead of that create a div absolutely positionned, containing the X OR with the before class linked to. Set your listener to that div.

answered Aug 12 '16 at 09:59

iguypouf

770
4
15

How to apply jQuery on css selector :before

3 Answers3