Matching start and end of CSS selectors using regex

Question

Matching start and end of CSS selectors using regex

If I have elements with a title attribute like the examples below, how can I select the div with the title

custom-marker-wqs-tailrace bbu-l2

using a CSS regex selector?

<div title="custom-marker-awlr-tailrace bbu-l2"></div>
<div title="custom-marker-aws-tailrace btut"></div>
<div title="custom-marker-arr-tailrace sbu-l3"></div>
<div title="custom-marker-wqs-tailrace bbu-l2"></div>
<div title="custom-marker-wqs-tailrace bbu-l1"></div>

Is it possible to use something like

div[title*="customer-marker-wqs...???"]

? I'm not sure what should replace the "???" in this case.

html css

Answer 1

Answer №1

To target a specific string within an attribute, you can use a single attribute selector like this:

div[title="custom-marker-wqs-tailrace bbu-l2"] {
  ...
}

If you want to match a title that starts and ends with certain strings, you can chain two attribute selectors like this:

div[title^="custom-marker-wqs-tailrace"][title$="bbu-l2"] {
   ...
}

This will select titles that start with custom-marker-wqs-tailrace and end with bbu-l2

Answer 2

To target a specific string within an attribute, you can use a single attribute selector like this:

div[title="custom-marker-wqs-tailrace bbu-l2"] {
  ...
}

If you want to match a title that starts and ends with certain strings, you can chain two attribute selectors like this:

div[title^="custom-marker-wqs-tailrace"][title$="bbu-l2"] {
   ...
}

This will select titles that start with custom-marker-wqs-tailrace and end with bbu-l2

Answer 3

Answer №2

Have you come across this helpful resource? https://developer.mozilla.org/en/docs/Web/CSS/CSS_Selectors You're almost there:

For starting with: div[title^="customer-marker-wqs"]
For ending with:   div[title$="customer-marker-wqs"]
For containing:   div[title*="customer-marker-wqs"]

Answer 4

Have you come across this helpful resource? https://developer.mozilla.org/en/docs/Web/CSS/CSS_Selectors You're almost there:

For starting with: div[title^="customer-marker-wqs"]
For ending with:   div[title$="customer-marker-wqs"]
For containing:   div[title*="customer-marker-wqs"]

Matching start and end of CSS selectors using regex

Answer №1

Answer №2

Similar questions

It appears that the flex-grow property is not functioning as expected

Using JQuery to append elements and then locate them with the find method does not produce the expected

Divide the <ul> element into two columns with CSS only if the number of <li> items is more than 5

Transmitting HTML through a Java socket connection

Steps to add a background image without a border:

Animate a div once the parent section becomes visible while scrolling

Using WebDriver to select and interact with a hyperlink on a website

Ways to display an icon upon hovering or clicking, then conceal it when the mouse is moved away or another list item is clicked using ngFor in Angular 7

Creating a space for showcasing error messages in Angular and CSS

Is it possible to use jQuery to identify when an item is located on a new line within a textarea?

Transform your current website layout from a fixed 960-grid system with 12 columns into a fluid and

What are some ways to modify the appearance of the post title table using CSS?

Error message: Uncaught SyntaxError: Unexpected import token encountered in (ReactJS, Babel, Webpack, NodeJS)

Shorten a data point in JSON code

Center text in the v-text-field label

Vue Quasar Drawer Layout with Bottom Bar

Can you provide an example of JSON for a MultiStep Form that includes a variety of control types for viewing

Guide on storing images in a designated folder using CodeIgniter

Encountering a ModuleBuildError while setting up Tailwind CSS in Laravel 8

As I go through the database, I notice that my div model functions correctly for the initial record but does not work for any subsequent ones