CSS Wild Card for Complex Id'S

CSS wild card for complex ID's

If I am understanding your question correctly, you are trying to select all elements whose id starts with subtab- followed by a number, followed by -sub followed by another number. It also sounds like you want this selector to not match #subtab-1, only things that have a suffix like #subtab-1-sub1.

This cannot be done with CSS. CSS does not supply a selector that will allow wildcards. You can however hack something together that comes pretty close.

Hacky selector that might work

[id^="subtab-"][id*="-sub"] would match any id that starts with subtab- and also contains -sub somewhere in the id. This will probably work but could cause false positives on things like #subtab-1-subtle or #subtab-something-sub2, #subtab-sub, etc.

Another hacky selector that might work

Making the assumption that #subtab-?-sub? elements are always contained inside of #subtab-? elements and that #subtab-? elements can never contain another #subtab-? element, you could use the child combinator to target them: [id^="subtab-"] > [id^="subtab-"]

Relying on a class instead

A better solution would probably be to give all of the elements you are trying to target a common class, for instance <div class="subtab-sub">, then selecting them all would be as easy as .subtab-sub. Using a class would also yield much faster performance than using attribute selectors.

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.

Css with regex for id

You can use special CSS selector for that: id$='0' means id ends with 0 and id^='s' means id begins with s.

#sections div[id$='0'][id^='s'] {    color: red;  }

<div id="sections"><div id="s10">one</div><div id="s2">two</div><div id="s30">three</div><div id="t1">four</div></div>

jQuery Complex selector with mid-wild card?

$('input[id$=_I]')

read here

EDIT:
or maybe you could do

$('input[id^=menu_popSearch]').not('input[id$=_S]')

EDIT 2:
okay as you keep refining the question I'll try to keep up

$('input[id^=menu_popSearch][id$=_I]')

read here now

Change css classes for specified id only

If the ID and class belong to the same element, you need to remove the space between the two in the CSS.

If there is a space, the CSS will find all elements matching the first part of the selector, then look INSIDE those elements for elements matching the second part of the selector.

If there is no space, the CSS will find all elements that have the first part of the selector AND the second part of the selector (eg. matching ID and Class).

Take a look at the code below. Hope this helps.

/* Target all elements with the Class of 'c' that are inside elements with the ID of 'i' */#i .c {  background: red;}

/*Target all elements with the ID of 'i' AND the Class of 'c'*/
#i.c {  background: yellow;}

<div id='i'>  <div class='c'>    ID and Class on different divs. Space in CSS.  </div>  <div class='b'>    This is not targeted because class b was not selected in CSS  </div></div>
<div id='i' class='c'>  ID and Class on the same div. No space in CSS.</div>

Wildcards in jQuery selectors

To get all the elements starting with "jander" you should use:

$("[id^=jander]")

To get those that end with "jander"

$("[id$=jander]")

See also the JQuery documentation

Is this CSS usage valid for targeting nested divs?

First of all: yor way is totally ok and the efficiency depends on the whole page. Maybe it can get more efficient with those ideas:

If your div-classes or ids are unique

You can also write just the class - you dont have to write the whole path then. Instead of

#content > .inner > .content > div { }

it is possible to write for example

.content > div { }

Helpful when you are using nested divs

When using nested divs you very often have to type a lot of code multiple times:

#content > .inner > .content { }
#content > .inner > .content > div {}
#content > .inner > .footer {}
#content > .inner > .footer > div {}

There are very helpful scripts called LESS and SASS (both of them work pretty much the same). They allow you to write everything just one time like

#content {
   .inner {
      .content {
         // some stuff
         div {
            // some stuff
         }
      }
      .footer {
         //some stuff
         div {
            // some stuff
         }
      }
   }
}

---

Related Topics