How to Select CSS Id's with Numbers in Them

How to select css id's with numbers in them?

What about using the following selector:

input[id^='something_stuff_'][id$='_work']

It will get inputs with id starting with "something_stuff_" and finishing with "_work".

How to select an element that has an ID which begins with a digit?

You can access it by using an attribute selector and selecting the ID attribute:

[id='634670717473476800'] {
  background-color: red;
}

<div id="634670717473476800" align="center" style="width: 100%; overflow-y: hidden;" class="wcustomhtml">div</div>

CSS can't select classes/id's with numbers in it?

i have faced the same problem.... actually it not a problem anyway..

instead of '.400-width' use '.width-400'

select all ids where the only difference is the number in the ID name

Just use the prefix attribute selector

[id^="myid"] {

}

This selector targets any element with an ID attribute that has the prefix "myid" - quotes around the value are optional. This selector works in IE7 & above as well.

Selecting multiple CSS ids with only 1 number changing on each

You can use the attribute selector: [attr*=value]:

[id*=edit-add-to-wishlist] {
    color: red;
}

jsFiddle here - it works

It selects all instances where a id contains edit-add-to-wishlist

[attr*=value]

Represents an element with an attribute name of attr and whose value contains at least one occurrence of string "value" as substring.

MDN documentation on the attribute selector

Is there a CSS Selector to select divs which have a number as id

No.

If you look at the specification you will see the closest thing to that are the various attribute selectors, but they only match on exact strings or substrings.

Since you mention JS, the easiest approach would probably be to get all the divs with an id, then filter them.

const regex = /^\d+$/;
const filter = element => regex.test(element.id);
const divs_with_ids = document.querySelectorAll("div[id]");
const divs_with_numeric_ids = Array.from(divs_with_ids).filter(filter);
console.log(divs_with_numeric_ids);

<div></div>
<div id="134"></div>
<p id="234"></div>
<div id="13d4"></div>
<div id="54354"></div>
<div id="5643f"></div>
<div id="454354"></div>

HTML ID with numerical value not recognized by CSS

Although it's allowed to set a class or id to begin with a digit in HTML5, but it's not allowed in CSS, see the spec:

HTML5: 3.2.5.1 The id attribute

... There are no other restrictions on what form an ID can take; in particular, IDs can consist of just digits, start with a digit, start with an underscore, consist of just punctuation, etc. ...

---

CSS: 4.1.3 Characters and case

... they cannot start with a digit, two hyphens, or a hyphen followed by a digit. Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code ...

i.e.

<div id="1"> is valid HTML, but you cannot target it with #1 {...} in CSS.

However, you can use [id="1"] {...} or escape it #\31 {...}

CSS selector for numbered class/id

If you always have the #menu0 element, you can use the general sibling selector that is IE8 compliant:

    #menu0 ~ [id^="menu"] {        color: red;    }

<div id="myMenu">   <div id="menu0">stuffs</div>   <div id="menu1">stuffs</div>   <div id="menu2">stuffs</div></div>

General CSS for #id ending with numbers

You can use the attribute starts-with selector:

[id^="samplelist_"] {
    color: white;
}

Better yet, give them a class.

---

Related Topics