Select elements by attributes with ":" (colon)

In my project, there's a case where a library generates elements, and I need to select specific elements from there - which happen to contain an attribute with ":". In other words, I ended up attempting to select using: document.querySelectorAll("[xml:space]"). But, when tested in Chrome, it didn't work, nor selecting using document.querySelectorAll("['xml:space']") - they both threw a DOMException: http://i.imgur.com/GrjpL85.png

My question is, how to make the above selector return the list of the elements with xml:space attribute? Thanks!

You need to escape the colon

document.querySelectorAll('[xml\\3A space]')

I used https://mothereff.in/css-escapes to get the code above :)

Find an element in DOM based on an attribute value, If you're using jQuery, greatif you're not, you need not rely it on just for selecting elements by attributes anymore. There's not a very short way to� The [attribute~="value"] selector is used to select elements with an attribute value containing a specified word. The following example selects all elements with a title attribute that contains a space-separated list of words, one of which is "flower":

Escape the : by preceding it with a double backslash \\

document.querySelectorAll("[xml\\:space]")

See this:

https://bugzilla.mozilla.org/show_bug.cgi?id=883044

jQuery [attribute=value] Selector, Select every element containing an id attribute with the value "choose": The [ attribute=value] selector selects each element with the specified attribute and� To select all anchors with the data attribute data-customerID==22, you should include the a to limit the scope of the search to only that element type. Doing data attribute searches in a large loop or at high frequency when there are many elements on the page can cause performance issues.

can also do

document.querySelectorAll('[id="xml:space"]')

Element.querySelectorAll(), The CSS Attribute Selector is used to select an element with some the selector [class] will select all the elements with the style attribute. Opens the Select By Text Node dialog, which is used to specify criteria based on element attributes specific to text node elements. Text strings are case sensitive. For example, inputting the string "North" would select "North", but not "north", nor "NORTH".

Attribute selectors, CSS allows to select HTML elements that have specific attributes or attribute values. Element can be selected in number of ways. The [attribute=value] selector selects each element with the specified attribute and value.

CSS, There are lots of ways you can select elements in CSS. The most basic can select. We can use any of an element's attributes as selectors. The <form> element to associate the <select> with (its form owner). The value of this attribute must be the id of a <form> in the same document. (If this attribute is not set, the <select> is associated with its ancestor <form> element, if any.) This attribute lets you associate <select> elements to <form>s anywhere in the document, not just inside a <form>.

How to select elements by data attribute using CSS?, attributeEquals selector. Description: Selects elements that have the specified attribute with a value exactly equal to a certain value. Select All - Select all elements in the active model (effect is same as choosing Edit > Select All or pressing <Ctrl+A>). Select None - Deselect all elements in the active file (effect is same as choosing Edit > Select None). Select By Attributes - Open the Select By Attributes dialog (effect is same as choosing Drawing > Home > Selection.

Comments
  • I think you need to escape the colon '[xml\\3A space]' see mothereff.in/css-escapes
  • Perfect! Thank you so much!
  • Best option for when the id is dynamic.