How to Use/Emulate Regex-Like Backreferences in Attribute Selectors

Can one use :nth-child to select elements where n is equal to n of a different element?

Selectors doesn't support variables or backreferences of any kind, in either attribute selectors (1 2) or functional pseudo-classes such as :nth-child(). You cannot use custom properties in selectors either.

As with attribute selectors in the first two links above, you can use a preprocessor to automate this but the resulting CSS file will still contain a hardcoded list of all the possibilities.

CSS selector equivalent for xpath selector

There isn't a CSS selector equivalent for

1. referencing attribute values across different elements
2. the following:: axis

Select an OL LI based on the starting value and not the Nth-Child

Unfortunately, CSS doesn't provide a selector that matches a list item by its ordinal value. It would certainly make a great addition to a future Selectors spec (I haven't seen anything like it proposed yet) assuming, for example, that browsers already have "list item" semantics built directly into HTML LI elements allowing them to take advantage of such a selector.

Neither does CSS provide the ability to parameterize selectors in a way that lets you write dynamic attribute or :nth-child() matches (see How can I use/emulate regex-like backreferences in attribute selectors?). The closest you can get is to have a preprocessor output as many static selectors as you need with the formula ol[start=$i] > li:nth-child($i). Here's an example in SCSS:

%item-3 {
  color: red;
}

ol:not([start]) > li:nth-child(3) {
  @extend %item-3;
}

// Assumes start attribute, if specified, begins with 2
@for $i from 2 through 3 {
  ol[start="#{$i}"] > li:nth-child(#{4 - $i}) {
    @extend %item-3;
  }
}

The hardest part, of course, is determining just how many of these you need.

A CSS wildcard selector to match dynamic classnames?

It looks like you're trying to match elements whose data-parent attribute corresponds to an existing number based on another element's .parent-element* class. Unfortunately, Selectors does not support this.

Based on your description of the markup I don't think there's much of a way around this other than DOM manipulations. I do wish to add though, that subtasks should ideally be marked up with nested lists. However if you have no control over the source markup, you'll have to find another way.

RegEx help to change properties in CSS

First of all, using the greedy .* is always problematic. In your case, it cosumes too much symbols so that you lose the background because it matches the last ; in your code (which comes after the background declaration). Instead use a negative character class which matches until the very next symbol you know should not be included in the match - in your case the ;. So the character class should look like: [^;]*. The same is true with matching the } symbol - use a negative character class instead.

Secondly, I would try to reduce the usage of capture groups.

And finally, I would reduce the clutter and put everything you don't want to replace into the capturegroups before and after so that you get a very simple result: '$1black$2'

Try the following regex:

preg_replace('/(#css.*?color:)[^;]*([^}]*)/is','$1black$2',$var);

See the demo

Note that this regex has one flaw: If you have different colors in your decplarations (background-color, border-color,...), it will break! So you should include an additional whitespace to make sure it only captures the "real" color declaration:

/(#css.*?\scolor:)[^;]*([^}]*)/is

This still might break if (which should not happen) per accident you have multiple color:xyz; declarations in your rule block. Only the first one gets replace then.

---

Related Topics