Can a CSS regex selector match either one condition or another?

Is there a way to find a match when the pattern /(\sclassName|^className)/ is met in CSS selection? One hypothetical approach could be:

[class(^|\s)='className'] {
  font-size: 5000px;
}

Although I found a helpful resource on CSS Attribute Selectors titled The Skinny on CSS Attribute Selectors, it doesn't cover this specific scenario.

I am specifically looking to only match instances of "icon-" in two examples, excluding the third one.

In the first example, you can achieve this with [class^='icon-]

<div class='icon-something another-class'>

In the second example, you can use [class~='icon-']. However, note that this won't match if 'icon-' appears at the start of the class string:

<div class='another-class icon-something'>

To avoid matching instances like -icon within strings, the *=` method or |=` method may be more suitable:

<div class='another-icon-class another-class'>
cssregex

Answer №1

To apply the same rule, you will need to use two separate selectors as CSS selectors do not fully support alternation.

[class^='icon-'], [class*=' icon-'] {
  /* ... */
}


div {
  color: red;
}

[class^='icon-'], [class*=' icon-'] {
  color: green;
}
<div class='icon-something another-class'>should match</div>
<div class='another-class icon-something'>should match</div>
<div class='another-icon-class another-class'>should not match</div>

Answer №2

If you're looking to target elements with classes that either begin with "icon-" or include " icon-" (with a space at the beginning), you can use the following CSS selectors:

[class^="icon-"], [class*=" icon-"] { ... }

Check out this JSFiddle demo for more.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Hide the paragraph element when the navigation link is being hovered over

Is there a way to hide a <p> element when hovering over a link? My website is built with Drupal and uses the Superfish module for the navigation bar. When I hover over the links, a secondary nav bar drops down. I want the slogan of the website to di ...

jqueryhtmlcssdrupalsuperfish

Is it possible to incorporate multiple gradients into the border-image?

When it comes to the background-image, you have the freedom to include as many radial-gradient and/or linear-gradient as you want. However, for the border-image, it appears that only one gradient can be added. This seems peculiar since the display principl ...

htmlcssborderborder-image

How come my div doesn't stick together with the other div while moving?

I am trying to figure out how to make the blue "shield" div cover the red "button" div after 3 clicks successfully. It seems like no matter what I do, the positioning is always off. I've played around with the randomplace variable, but nothing seems t ...

javascripthtmlcssfunction

Steps to create a clickable drop-down arrow with a label

I've designed a vertical navigation accordion menu that allows users to hover and click on any title (label) to expand a sub-menu. However, I'm facing an issue where my drop-down arrow is not clickable, unlike the rest of the label which works f ...

htmlcssnavigationhoverclickable

Characteristics of a high-end text editing tool

When working with the following RTE, one challenge I face is reducing the width. However, doing so may result in removal of some features such as bold and underline options. Is there a way to decrease the width without losing these buttons? In other word ...

jqueryhtmlcsstinymcerich-text-editor

Having trouble clicking the button due to the overlay blocking it?

This code contains the HTML portion <li id="nav1" class="navs"><a unselectable="on" draggable="false" class="Navigation" href="http://youtube.com">YouTube</a></li> Below is the CSS code .navs:after { content: ""; position: ab ...

htmlcsshyperlink

The JQuery mouseover and mouseout functionality for CSS is not functioning properly

Struggling to create an expanding navigation bar using CSS. Managed to implement it, but ran into issues when it kept resetting after navigating to a new page. Resorted to using jQuery to resolve the problem by utilizing mouse enter and mouse leave events. ...

jqueryhtmlcssnav

Obtain primary picture through PHP

Is there a way to automatically extract the main image for an article from the HTML of a webpage, similar to how Facebook generates a preview when you share a link? Given that the page and URL will vary each time this function is executed, are there any l ...

phpregeximage

Adaptable filler text

I am looking for a placeholder that can hold changing values: <input type="text" placeholder="Search by Name, Order Number and Location" style="width: 300px" /> <input type="text" placeholder="Search by Name" style="width: 300px" /> My goal ...

javascriptangularjshtmlcssplaceholder

Creating equal height Bootstrap 5 cards within card-columns using owl-carousel

I'm having trouble ensuring that all the images in my carousel have the same height. Despite trying to use the h-100 class, the heights still vary. Changing the content within the p tags also affects the size of the images. Here's a snapshot: the ...

htmlcssbootstrap-5owl-carousel

Creating a two-column post loop in Wordpress is a great way to display content in a

I've been attempting to separate posts for a long time without success. No matter what variations I try, the result is always either a single post or duplicating all of them. In other words, multiple posts are not displaying as intended. If anyone ha ...

phpcsswordpress

How can I customize the color of the selected Leaflet GeoJSON FeatureLayer and its border?

Learn how to customize the fill and border color for leaflet GeoJSON layers with the following options. /** * Generates GeoJSON layers and assigns event handlers. */ private createGeoJsonLayer(geodata: any, map: L.Map): L.GeoJSON<any> { c ...

javascriptcssangularleaflet

What is the process for creating a Sass mixin that declares a selector at the base level, rather than nested within another

Apologies for the unconventional terminology in the query, but I am struggling to find better words to describe it. Hopefully, this example will clarify my intention: scss-syntax .my-smug-selector { @include my-smug-mixin(30px); } desired css-output ...

csssassmixins

struggling to get my trio of cards to line up correctly on a compact screen

When my elements reach the breakpoint of 1199, I have an issue with their alignment. Despite using justify-content, the style breaks and the cards are not stacked together as intended. I tried using mx-auto, but it doesn't seem to work. I've noti ...

cssbootstrap-5

Referencing another component in StyledComponents

I'm looking to modify the properties of my parent component's :after selector whenever the child element is focused. It seemed straightforward at first, but for some reason, I just can't seem to make it work. Here's a glimpse of my comp ...

javascriptcssreactjsstyled-components

focusing on every item within a container

Currently, my code looks like this: $(".container a").css("color","#ffffff"); It styles all links inside the ".container" element to be white. However, I have a div that has the following structure: <div class="container"> <div class="header" ...

javascriptjqueryhtmlcss

Is there a way to make a link open only on the second click, instead of the first?

Is it possible to have a popunder advert that opens only when the page is clicked a second time, not the first time? Here's the code for the popunder: <script type="text/javascript"> var uid = '35190'; var wid = '65325'; &l ...

javascripthtmlcss

Tap on the Dropdown Menu to access the Responsive design feature

Currently, I am working on perfecting a responsive navigation menu. My goal is to have the drop-down menu appear when the menu icon is clicked, as opposed to the hover effect. I am utilizing a Google jQuery script, but I am unsure if the drop-down functi ...

csshtmldrop-down-menuresponsive-design

Customizing CSS float labels for individual inputs

For my project, I've implemented CSS code to create a floating label effect for form inputs. If you need the original code reference, it can be accessed here. However, since there are multiple examples in the original codebase, I have extracted and m ...

csscss-animations

Tips for including a permanent button at the bottom of a material ui dialog box

I want to implement a dialog popup in my react js application. When the user clicks on a button, the dialog should open up. Inside the dialog, there is a form with input fields. After the user fills out all the inputs, they can submit the information by cl ...

javascriptcssreactjsmaterial-uidialog