0

I have a datetime picker calender, in which I need to modify some Pseudo elements,

.bootstrap-datetimepicker-widget.dropdown-menu.bottom:before {
    border-bottom: 7px solid #ccc;
    border-bottom-color: rgba(0,0,0,.2);              
    left: 7px;
}

This is my pseudo css, in which I need to modify left to 235px, but I really can't seem to do it using jquery. Tried this without success,

if(selectedRow == noOfRows){
            $(".bootstrap-datetimepicker-widget.dropdown-menu.bottom:before").css({
               "left":"235px !important"
            });
            $(".bootstrap-datetimepicker-widget.dropdown-menu.bottom:after").css({
                "left":"235px !important"
            });
        }

Advice and knowledge is appreciated.

Uzair Khan
  • 2,812
  • 7
  • 30
  • 48
  • 1
    You should toggle a class instead as javascript/jQuery cannot target pseudo element. e.g: `.toggling-class.bootstrap-datetimepicker-widget.dropdown-menu.bottom:before { left: 235px; }`. And then: `$(".bootstrap-datetimepicker-widget.dropdown-menu.bottom").addClass('toggling-class');` – A. Wolff May 11 '16 at 10:52
  • Thanks buddy. It worked. :) – Uzair Khan May 11 '16 at 11:21

0 Answers0