CSS Selector (Id Contains Part of Text)

CSS selector (id contains part of text)

Try this:

a[id*='Some:Same'][id$='name']

This will get you all a elements with id containing

Some:Same

and have the id ending in

name

CSS select elements with partial id

Not with ID selectors since they require complete ID names, but with substring attribute selectors:

div[id^="as_"]
div[id^="bs_"]

But since your elements have a class attribute anyway, why not add a common class to each group of elements and select by that class to make things simpler? You should be able to determine the grouping class using PHP as you do to generate the IDs.

Is there a CSS selector for elements containing certain text?

If I read the specification correctly, no.

You can match on an element, the name of an attribute in the element, and the value of a named attribute in an element. I don't see anything for matching content within an element, though.

Find element by partial id and text?

CSS selectors will not find containing text, only XPath will do that. You can use the XPath below,

//span[contains(@id,'somePartialId')][.='Open']

You didn't specify the partial ID to look for so you'll have to fill that in yourself. I changed the contains() to equals for the containing text because you are a lot more likely to find more than you bargained for with contains(). I would suggest that you always use equals if it is the entirety of the contained text and only use contains() if it's partial text.

How to select html elements where id contains

You can use wildcard selectors as shown below to match a partial attribute tag, including id.

document.querySelector('[id*="MobileAreaCode"]');

If you want more than one element to be returned use querySelectorAll.

document.querySelectorAll('[id*="Mobile"]');

CSS select elements with partial id

Not with ID selectors since they require complete ID names, but with substring attribute selectors:

div[id^="as_"]
div[id^="bs_"]

But since your elements have a class attribute anyway, why not add a common class to each group of elements and select by that class to make things simpler? You should be able to determine the grouping class using PHP as you do to generate the IDs.

How to get CSS to select ID that begins with a string (not in Javascript)?

[id^=product]

^= indicates "starts with". Conversely, $= indicates "ends with".

The symbols are actually borrowed from Regex syntax, where ^ and $ mean "start of string" and "end of string" respectively.

See the specs for full information.

How to check if style ID contains certain css selectors?

Firstly, I think you mean about the existing of some CSS rule in some style, not just selector. You can try this:

var style = document.querySelector('#compiled_styles');
var ss = style.sheet || style.styleSheet;
var hasSomeRule = (ss.rules || ss.cssRules).length;
//remove the style if it's empty
if(!hasSomeRule) (style.parentNode || style.parentElement).removeChild(style);

Demo 1

Another solution is just try getting some text of the style element, if it's not empty it should have some certain rule:

var style = document.querySelector('#compiled_styles');
var hasSomeRule = style.innerHTML.replace(/^\s+$/,'').length;
//remove the style if it's empty
if(!hasSomeRule) (style.parentNode || style.parentElement).removeChild(style);

Demo 2.

Select div with unknown id in name

Althought CSS does not support regular expression query selector, with your case, we can select div that has id attribute starts with mobile_div_ and ends with -99

div[id^="mobile_div_"][id$="-99"] {
    // your style
}

We use two CSS3 selectors here:

^= starts with

$= ends with

Refs:

https://www.w3schools.com/cssref/sel_attr_begin.asp

https://www.w3schools.com/cssref/sel_attr_end.asp

---

Related Topics