Styling a pseudo element :: after with jQuery

Question

Styling a pseudo element :: after with jQuery

Navigation

#1 by (2 votes)
#2 by (1 votes)

1

How to select from jQuery an element of this style?

.page-container .single-page:nth-of-type(2)::after { }

The idea is to be able to modify certain rules CSS from JavaScript.

javascript jquery html css

asked by oscarvady 26.10.2016 в 16:06

source

2 answers

2

Since ::after is a pseudo element and does not exist in the DOM, it is practically impossible to directly use that selector in jQuery.

A typical solution to this problem is to play with the classes (add or remove according to what you want to do):

$('button.click1').click(function() {
  $('.page-container .single-page:nth-of-type(2)').addClass('click1').removeClass('click2');
});

$('button.click2').click(function() {
  $('.page-container .single-page:nth-of-type(2)').addClass('click2').removeClass('click1');
});

.page-container .single-page:nth-of-type(2)::after {
   content: 'Adios';  
}

.page-container .single-page.click1:nth-of-type(2)::after {
   background-color: blue;
   color: white;
}

.page-container .single-page.click2:nth-of-type(2)::after {
   background-color: red;
   color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="page-container">
  <div class="single-page">
    Hola
  </div>
  <div class="single-page">
    me fui 
  </div>
</div>
<button class="click1">Fondo azul</button>
<button class="click2">Fondo rojo</button>

answered by 26.10.2016 в 16:32

How to remove variables from a URL with htaccess How to run Django in python 3.5

score 1 · Accepted Answer

Since javascript is impossible to style the pseudoclasses and pseudo elements because these rules are not part of the DOM.

To solve this limitation you have several options

Add specificity

You add a class to your style sheet, eg .clase1

$(function() {
  $('button').click(function() {
    $('.page-container .single-page:nth-of-type(2)').addClass('clase1');
  });
});

.page-container .single-page::after {
  content: ' ';
  display: block;
  width: 40px;
  height: 20px;
  margin: 10px;
  background-color: red;
}
.page-container .single-page:nth-of-type(2)::after {
  background-color: violet;
}
.page-container .single-page:nth-of-type(2).clase1::after {
  background-color: blue;
}
.page-container .single-page:nth-of-type(2).clase2::after {
  background-color: orange;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="page-container">
  <div class="single-page"></div>
  <div class="single-page"></div>
  <div class="single-page"></div>
  <div class="single-page"></div>
  <button type="button">Haz click</button>
</div>

Having more specificity will have higher priority and therefore will show the desired style. The disadvantage is that the number of changes you can make from javascript is limited by the number of classes you generate, that is, this method is viable when the modifications are discrete and not to make changes arbitrary .

You can also use attribute and element selectors as a means to add specificity.

Replacement

You can replace the pseudo elements with elements and if they allow to be manipulated

.page-container .single-page:nth-of-type(2) .after { 
    //estilos
}

Technically the pseudo elements ::before and ::after are the first and last direct descendants of a given element and you can create an element that occupies the same position and style it

<div class="page-container">
    <div class="single-page">
        <span class="before"></span>
        <div class="contenido"></div>
        <span class="after"></span>
    </div>
</div>

This is a very dirty trick because of the amount of elements that you must generate and of course it has its limitations as it is very complex to reproduce all the pseudo elements like ::first-letter , ::first-line , etc, but it will allow you to add any arbitrary style using javascript.

If you use it in this way you can use the :first-child and :last-child to select the" simulated "pseudo elements.

To simulate pseudoclasses you can use events such as hover and mousemove that will also partially solve the problem.

Check the example

$(function() {
  $('button').click(function() {
    var color = $('#color').val();
    $('.page-container .single-page:nth-of-type(2) :last-child').css({
      'background-color': color
    });
  });
});

.page-container .single-page .after {
  content: ' ';
  display: block;
  width: 40px;
  height: 20px;
  margin: 10px;
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <label>Escriba un color</label>
  <input id="color" type="text">
  <button type="button">Cambiar</button>
</div>
<small>Ej blue, orange, #00f0e1</small>
<div class="page-container">

  <div class="single-page">
    <span class="after"></span>
  </div>
  <div class="single-page">
    <span class="after"></span>
  </div>
  <div class="single-page">
    <span class="after"></span>
  </div>
  <div class="single-page">
    <span class="after"></span>
  </div>

</div>