CSS Target Just Class Name Starts with and Ends with String

How to select all elements whose ID starts and ends with specific strings?

The following CSS3 selector will do the job:

tr[id^="section_"][id$="_dummy"] {
    height: 200px;
}

The ^ denotes what the id should begin with.

The $ denotes what the id should end with.

---

id itself can be replaced with another attribute, such as href, when applied to (for example) <a>:

a[href^="http://www.example.com/product_"][href$="/about"] {
    background-color: red;
}

CSS: Class name selector- name starts with

The selector you are using *= matches any attribute containing that string.

Instead, you want ^=, which matches any attribute beginning with that string.

A combination would work best:

a[class^='color-'], a[class*=' color-'] { ... }

See MDN page on CSS attribute selectors and
this other SO answer.

select element starting with class name and contain part of string

You can use [class^="path_from"][class*="_6"] attribute selector

• [class^="path_from"] - class starts with path_from
• [class*="_6"] - class contains _6

[class^="path_from"][class*="_6"] {  background: blue;}

<div class='path_from_5_to_6'>DIV</div><div class='_6'>DIV</div><div class='path_from_6_to_5'>DIV</div><div class='path_from_3_to_2'>DIV</div>

Select all elements whose name starts with a specific string in CSS

Nope, there is no CSS selector like "wildcard elements" to retrieve elements based on a partial element name.

You can:

A) Use class-names or any other attributes, since element attributes can be accessed using selectors with regular expressions. (As in your question.)

my-element[my-attribute] { … }

B) Use a CSS pre-processor like SCSS to generate a list of such element names:

@for $i from 1 through 3 {
  my-element-#{$i} {
    background-color: red;
  }
}

C) Or just write them one after another in the CSS, delimited by a comma: (This is the same as writing each rule independently as in your question.)

my-element-1,
my-element-2,
my-element-3 {
    background-color: red;
}

How to select element has class start and end with specific string using jquery?

You can combine two jquery Attribute Starts With Selector [name^=”value”] and Attribute Ends With Selector [name$=”value”] to do this work.

$('div[class^="wrap-"][class$="-addon-1"]')

$('div[class^="wrap-"][class$="-addon-1"]').css("color", "red");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="wrap-1-addon-1">wrap-1-addon-1</div><div class="wrap-2-addon-1">wrap-2-addon-1</div><div class="wrap-3-addon-1">wrap-3-addon-1</div><div class="wrap-3-addon-2">wrap-3-addon-2</div>

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.

Select class that does not begin with string

You can't select a child element that does not contain a class that begins with z-depth- with CSS, you can only:

1. Select all the child elements whose class attribute's values don't start from z-depth- substring:

.well .well:not([class^="z-depth-"]) {    color: red;}

<div class="well z-depth-1">Parent div    <div class="z-depth-2 well">First child div</div>    <div class="well z-depth-3">Second child div</div></div>

---

Related Topics