Is AngularJS messing up with CSS :target selectors?

[binarykitchen]

Looks like I cannot apply styles to :target selectors anymore. Is this because of AngularJS?

[caitp]

anymore

Which version of AngularJS did you upgrade to in noticing this issue? How are you trying to apply styles to :target selectors? What browsers are you seeing issues in? How are you determining that you aren't able to apply styles?

[caitp]

Lots of info is missing, if you could provide some details that would be helpful.

[binarykitchen]

Ok, I am using AngularJS's npm package at https://www.npmjs.org/package/angular (current version is 1.2.19)

Then, here an example of the CSS I am trying:

ul#changelog li:target {
  background: #008000;
}

the html code is

<ul id="changelog" class="ng-scope">
    <li id="0.1.1">
        <h3 class="version"><a href="#0.1.1">Version 0.1.1</a>&nbsp;[current]</h3>
        <ul>
            <li>[feature] ...</li>
        </ul>
    </li>
    <li id="0.1.0">
        <h3 class="version"><a href="#0.1.0">Version 0.1.0</a></h3>
        <ul>
            <li>[feature] Revamp ...</li>
            <li>[feature] ...</li>
        </ul>
    </li>
</ul>

Fails on latest Firefox and Chrome. When I browse to https://localhost:8080/versions#0.1.1, the <li> tag with the id 0.1.1 should have the green background colour but doesn't.

Without AngularJS it works fine.

[caitp]

Seems to be working here http://plnkr.co/edit/E1dscGK7SO6SKtMnqt6C?p=preview

Please post a full reproduction (plnkr should work, but github is fine if you need that instead)

[binarykitchen]

Thanks @caitp but you also should wrap the body with data-ng-view + data-ng-cloak, make it a single page app and enable the html5Mode to reproduce my case.

[caitp]

again, please post a full reproduction of your issue! package it! put it on the internets!

[binarykitchen]

Well, it's a private repo ... in that case I could make you a collaborator so that you can git pull it. Would you do that?

[caitp]

you can squeeze it down to something that you can show publicly, that would be best.

[binarykitchen]

ok, will set up something soon on my server, stay tuned

[jeffbcross]

Hi @binarykitchen it'd be a lot more helpful if you could reduce the code to something that fits in a plunker, rather than requiring reviewing on your server.

[binarykitchen]

Okay @jeffbcross @caitp here is a reduced code on plunker:
http://plnkr.co/edit/N68dpnGCbl7eYsbdXnN8?p=preview

If you remove the <script async src="script.js"></script> part in the index.html then the CSS effect for li:target work. With the script, it doesn't.

The script itself is generated by browserify - on the top it's AngularJS, at the bottom you'll find the application-specific code. I removed anything obsolete to keep it as small as possible.

I hope this helps locating the bug!

[caitp]

It works as expected if you change the tags in your template to use target="_self", I suggest doing that