: the target selector of the dynamically generated element is not affected

My test shows that the selector :targetacts on elements that exist in the DOM only when the page loads. I'm right?

I cannot create a fragment here because I cannot call an iframe fragment with a hash ( #) so that you can see the problem here:

http://output.jsbin.com/vixave#new_element

HTML button

<button onclick="addElement()">Add element</button>

CSS

div:target {
  background:red;
  color:#fff;
}

Javascript

function addElement() {
  document.body.innerHTML += '<div id="new_element">New element</div><br /><a href="#new_element">highlight</a>';  
}

In this demo, you can see that after you click on the button and div #new_elementadded to the body, it will not “get” the style. Only when you click on a link that again calls to the same URL will the style be applied.

Refresh

@BoltClock ♦ , Chrome FireFox, IE ( ) .

+4
1

:target, ( # URL-) - .

W3C Selectors HTML5.

6.6.2. : target

URI . URI "number" (#), ( ).

URI , . , URI, section_2 HTML:

http://example.com/html/top.html#section_2

-: target. URI , .

https://www.w3.org/TR/selectors/#target-pseudo

name id , .

5.6.9

...

  1. DOM , , , ; .
  2. fragid: DOM , , fragid ( ), ; .

https://www.w3.org/TR/html5/browsers.html#scroll-to-fragid

, id name, URL- ( / ).

+1

All Articles