Select pseudo-elements with jquery

Question

How would you convert this block of css into jquery?

.nav li a:first-child:nth-last-child(2):before { 
    content:""; 
    position: absolute; 
    height:0; 
    width: 0; 
    border: 5px solid transparent; 
    top: 50% ;
    right:5px;  
}

I've tried a couple different ways but nothing I tried worked properly. Where this css selects only before the the jquery selects the whole anchor.

$(".nav li a:first-child:nth-last-child(2)").before().css(...); // did not work

$(".nav li a:first-child:nth-last-child(2)").before(function(){
    $(this).css(...);
}); // did not work

I tried a lot of other stuff as well, let me know what you guys think, Thanks!

HTML:

<ul class="nav">
    <li><a href="index.php">Home</a></li>
    <li><a href="index.php">Class Assignments</a>
        <ul>
            <li><a href="#">Java</a>
                <ul>
                    <li><a href="java1.php">Java 1</a></li>
                    <li><a href="java2.php">Java 2</a></li>
                    <li><a href="java3.php">Java 3</a></li>
                    <li><a href="java4.php">Java 4</a></li>
                </ul>
            </li>
            <li><a href="#">JavaScript</a>
                <ul>
                    <li><a href="javaScript1.php">JavaScript 1</a></li>
                    <li><a href="javaScript2.php">JavaScript 2</a></li>
                    <li><a href="javaScript3.php">JavaScript 3</a></li>
                    <li><a href="javaScript4.php">JavaScript 4</a></li>
                </ul>
            </li>
            <li><a href="#">PHP</a></li>
            <li><a href="#">C#</a></li>
        </ul>
    </li>
    <li><a href="index.php">Projects</a>
        <ul>
            <li><a href="project.php">Project</a></li>
            <li><a href="project.php">Project</a></li>
            <li><a href="project.php">Project</a></li>
            <li><a href="project.php">Project</a></li>
        </ul>
    </li>
    <li><a href="index.php">Contact</a></li>
</ul>

This is what it looks like with the css...

enter image description here

Are you sure you mean `.nav li a:first-child:nth-last-child(2):before`? I made a fiddle and the CSS doesn't seem to affect any part of the code at all... http://jsfiddle.net/Niffler/287y3s4s/ — Niffler, Nov 19 '14 at 23:34
@Niffler it doesn't matter; you cannot manipulate pseudo-elements from JS. — Evan Davis, Nov 19 '14 at 23:38
@Mathletics I figured that since the CSS that's been given doesn't affect anything anyway, maybe the OP actually meant something other than ":before"... If not, then that's too bad of course... — Niffler, Nov 19 '14 at 23:40
The code in CSS works perfectly fine, the reason it didn't show is because I have another css affecting the color of it. So it's there you just can't see it.. — Foemilod, Nov 19 '14 at 23:41
@Niffler I added an image as what the nav looks looks like with the css — Foemilod, Nov 19 '14 at 23:50

score 2 · Accepted Answer · answered Nov 19 '14 at 23:56

2

Not sure that would work exactly the same as with :before, but what if you used jQuery to insert a <span>-tag instead, and then adjust the CSS of the <span>? I.e.

$(".nav li a:first-child:nth-last-child(2)").prepend('<span class="before-hack" />');
$('.before-hack').css(...);

Here's a fiddle: http://jsfiddle.net/Niffler/287y3s4s/9/

answered Nov 19 '14 at 23:56

Niffler

1,645
11
11

That worked, I wasn't aiming for the exact same way that css does it, I just wanted to accomplish the same goal. I didn't really make that specific but yeah. Thanks very much :) – Foemilod Nov 20 '14 at 00:07

score 1 · Answer 2 · answered Nov 19 '14 at 23:17

1

Javascript can't modify :before, :after pseudoselectors.

Solution for your problem is add css rules directly to css file. https://developer.mozilla.org/en-US/docs/Web/API/document.styleSheets

answered Nov 19 '14 at 23:17

Człowiek Fin Śpiewak

249
1
10

Not even with JQuery? – Foemilod Nov 19 '14 at 23:20
1

@Foemilod LOL jQuery __is__ JavaScript. – Evan Davis Nov 19 '14 at 23:21
I know, but I was hoping it offered more features, where Javascript left something out, JQuery could have added it... – Foemilod Nov 19 '14 at 23:25
2

@Foemilod jQuery cannot do anything that JS cannot do. – Evan Davis Nov 19 '14 at 23:39

score 0 · Answer 3 · answered Nov 19 '14 at 23:21

First store the css into an object:

     var css =
            {
           "content":"",
           "position":"absolute",
           "height":"0",
           "width":"0", 
           "border":"5px solid transparent",
           "top":"50%",
           "right":"5px"
            };

Then call the css function before any other functions:

        $(".nav li a:first-child:nth-last-child(2)").css(css).before(function(){


        });

I believe you will need to call the css function before the other functions.

This ended up smooshing the elements together and messed up the nav, well it reduced their width to 0. I did try adding it before any other css as well. Which happened with my previous attempts.. — Foemilod, Nov 19 '14 at 23:27

Select pseudo-elements with jquery

3 Answers3