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 … Read more
You can combine the selectors using :is() and comma , .tr1 th:is(:nth-child(1),:nth-child(5)), :is(.tr2,.tr4) td:is(:nth-child(2),:nth-child(4)), .tr3 td:nth-child(3) {background-color:green} .tr1 th:is(:nth-child(1),:nth-child(5)):hover, :is(.tr2,.tr4) td:is(:nth-child(2),:nth-child(4)):hover, .tr3 td:nth-child(3):hover {background-color:hotpink} .tr1 th:is(:nth-child(1),:nth-child(5))::selection, :is(.tr2,.tr4) td:is(:nth-child(2),:nth-child(4))::selection, .tr3 td:nth-child(3)::selection {color:hotpink}
Is it possible to make a search by querySelectorAll using multiple unrelated conditions? Yes, because querySelectorAll accepts full CSS selectors, and CSS has the concept of selector groups, which lets you specify more than one unrelated selector. For instance: var list = document.querySelectorAll(“form, p, legend”); …will return a list containing any element that is a … Read more
[id^=’someId’] will match all ids starting with someId. [id$=’someId’] will match all ids ending with someId. [id*=’someId’] will match all ids containing someId. If you’re looking for the name attribute just substitute id with name. If you’re talking about the tag name of the element I don’t believe there is a way using querySelector
It’s based on IDs, classes and tags. IDs have the highest specificity, then classes then tags, so: .item a == 0 1 1 0 (id) 1 (class=item) 1 (tag=a) .special == 0 1 0 #foo == 1 0 0 #foo .bar a == 1 1 1 #foo #bar == 2 0 0 whichever has the … Read more
In CSS the selector string is largely describing the nesting structure, and there does not currently exist any generational skipping selectors such that you might theoretically do something like .item:nth-grandchild(4) to replace your fifth example. If reducing verbosity of your css is of high importance to you (lets say you have up 10 or even … Read more
Is there a CSS rule that would match elements based on their width? No. If not, would it be interesting to propose that in the standard? Maybe, but not the Selectors standard, because Selectors is not intended to be tightly coupled with the styling aspect of CSS. There were proposals to standardize something called “element … Read more
I’m trying to select the first and last child of an element with a specific data- attribute. Bottom line is, there’s no way to do that in CSS. last-child (and last-of-type) mean, well, “last child”, and “last child of type”, they do not mean “last child matching the entire selector including an attribute selector”. In … Read more
Where’s the problem? The problem is that you’re treating ideas and proposals in early-stage drafts as actual features, by using them with the expectation that they’d work at all, let alone across browsers. Review the status of the WD: This is a draft document and may be updated, replaced or obsoleted by other documents at … Read more
Make sure your <li> actually has two <a> elements as its first two children, and not some other elements around them since those may be invalidating the :first-child and adjacent sibling selectors. If you just want to select the second <a> element regardless of what other types of elements there are in your <li>, use … Read more