[CSS Selector] E:target

'selector:target' applies styles to an element whose id matches the hash value in the URL. The 'hash value' (fragment, anchor) is the part of the URL after the '#' symbol. For example, in 'http://wp-p.info/index.html#hoge', 'hoge' is the hash value. This is commonly referred to as a 'pseudo-class' (the :target pseudo-class). It does not work in IE8 and below.

Sample Code

p:target { color: red;} /* Makes a p element with an id attribute matching the 'hash value' display in red. */

Browser Display Result

p:target { color: red;} /* Makes a p element with an id attribute matching the 'hash value' display in red. */

<a href="#hoge_sample">Click here to change the text color.</a>
<p id="hoge_sample">The color will change.</p>

Browser Compatibility

Desktop

Chrome

1+ ○

Firefox

1+ ○

Safari

1.3+ ○

Edge

12+ ○

Supported in all versions

IE

11 ○

10 ○

9 ○

8 ×

7 ×

6 ×

Opera

9.5+ ○

8 and earlier ×

Mobile

iOS Safari

2+ ○

1 and earlier ×

Android Browser

2+ ○

Chrome Android

Latest ○

Same support as desktop

Firefox Android

Latest ○

Same support as desktop

※ Version data is based on MDN.

Home

Tweet

シェアする