Управление псевдоклассами и псевдоэлементами
 

Есть ли возможность управлять псевдоэлементами и псевдоклассами через js, не добавляя/изменяя/удаляя style-теги? Именно управлять, ибо как получить их стили я и так знаю.
Сначала мне стало интересно, что будет если по mouseup-событию, т.е. когда после выделения юзер отпускает кнопку мыши, включать следующую функцию:

document.onmouseup = function() {
	var b = document.querySelector('::selection'); /* получаем выделенный фрагмент */ 
	/* 
	 * т.к. ::selection - псевдоЭЛЕМЕНТ , я подумал что в полученном объекте будет innerHTML или textContent
	*/
	b = b.innerHTML || b.textContent || b; /*но всё-таки есть это просто только выделенный текст - в конце будет b */
	alert(b); /* по задумке выведет выделенную часть */
};

, но document.querySelector вернул "SyntaxError: An invalid or illegal string was specified"

Что ещё запрещает querySelector? Я знаю что нельзя получить элементы с псевдоклассом :visited, может ещё что есть?
И как управлять псевдоэлементами ::before ::after. Запрос на получение элемента (ещё раз повторюсь, именно его самого, а не его стиля) '.class::before' как и '.class:before' - ничего не дал.
И, если есть способ, как изменить content этого самого :before или :after?

Да,

document.getElementById('class').querySelector(':first-letter');

- тоже возвращает null.

2chan, так работать не будет.

window.getSelection() -> для получения выделенного текста

element.textContent.charAt(0) -> для получения первой буквы текста

Ну зачем изменять ::after/::before через JS? Просто меняешь класс и всё. Но если прям так надо, то:

var style = document.createElement('style');
style.type = 'text/css';
style.appendChild(document.createTextNode('\
    .myElem::before {\
        content: "123";\
    }\
    .myElem::after {\
        content: url("test.png");\
    }\
'));
document.head.appendChild(myElem);

Но лучше всё-таки использовать классы, ибо вариант с созданием style - говнокодинг.