CODEWITHSUNDEEP
htmlcsscss-selectors
user3502346
user3502346

Reputation:

CSS selector for id starting with hash (#)

I'm currently learning css and html and i've encountered an issue i never imagined i would, i've got to select an ID which ID is the following:

<header id="#Test">Testing Test</header>

Everytime i try to select this id on my css stylesheet there always seems to be an issue:

##Test {
    color: red;
}

I can't get the properties to work, i dont know how to select it, i would love if somebody would help me resolve this issue, thanks in advance!

Upvotes: 13

Views: 11545

Answers (4)

Salman Arshad
Salman Arshad

Reputation: 272106

You can still use the ID selector by escaping the syntax characters like this:

#\23Test1 {
  color: #F00;
}
#\23 Test2 {
  color: #080;
}
#\000023Test3 {
  color: #00F;
}
<header id="#Test1">Testing Test</header>
<header id="#Test2">Testing Test</header>
<header id="#Test3">Testing Test</header>

The 23 in the above examples is the hexadecimal representation of # unicode code point value. The three variants above work as follows:

  1. A non-hexadecimal character (the T in this case) indicates end of escape sequence.
  2. A space indicates end of escape sequence.
  3. Exactly 6 hexadecimal digits are used.

Upvotes: 10

Alex Char
Alex Char

Reputation: 33218

You can use Attribute selectors and more specific:

[attr^=value]

Represents an element with an attribute name of attr and whose value is prefixed by "value".

div[id^='#'] {
  background: red;
}
div {
  width: 200px;
  height: 100px;
  border: solid 1px;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
<div id="#Test">With ID starts with #</div>
<div id="Test">ID doesn't start with #</div>

This way will select all elements with id starting with #.

Upvotes: 1

Venkata Krishna
Venkata Krishna

Reputation: 1776

CSS supports escaping

#\#Test {
    color: red;
}

Try this. Here one # is escaped to indicate it is part of the value of id

Upvotes: 17

emmanuel
emmanuel

Reputation: 9615

You could use [att=val] selector.

header[id="#Test"] {
    color: red;
}
<header id="#Test">Testing Test</header>

[att=val] Represents an element with the att attribute whose value is exactly "val".

Rerefence: Attribute presence and value selectors

Upvotes: 12

Related Questions