How To Apply CSS rule to Classes with Specific Keywords Inside Them?


Tags: css,css-selectors

Problem :

That is to say, see the following:

<div class="helloeverybody">
</div>
<div class="heyeveryperson">
</div>

I want to apply a css rule to every class with the word "every" in it. Is there a formal name for this?



Solution :

You can use the "contains" attribute selector by appending an asterisk after the attribute - e.g.

div[class*=every] {
    color: orange;
}

http://jsfiddle.net/FWP8j/1/

The definition from Selectors Level 3:

Represents an element with the att attribute whose value contains at least one instance of the substring "val". If "val" is the empty string then the selector does not represent anything.


    CSS Howto..

    jquery image preview on hover - how to set fixed position?

    How to link css files to work correctly with wamp server?

    After ul li's float left ,how can I make text-align center?

    How to add a disabled internal Style node to HTML5 DOM?

    How to make my right-box float right…?

    how to read the following css class

    How to show/hide content based on a css class

    How to add space after border in css

    How to embed SVG styling with javascript?

    How a sloping/leaning background colour can be set to a text with HTML-CSS

    How are multiple spaces showing in HTML, without pre, nbsp or white-space: pre?

    CSS: How to create a background cutout using elements (not images)?

    How to remove inline css with jQuery onClick [closed]

    How do I keep an element scaled in CSS3 in-till mouseleave? Then on mouseleave scale the element back to it's original size

    How can I let div inside bootstrap colum scrollable

    How to register Css of html page in wordpress theme

    how to highlight specific control with css [duplicate]

    How to display shopping cart at the right of page

    How do I specify in HTML or CSS that a table column should have the minimum width

    How can I make DIV 100% height of browser without vertical scrolling of header

    How to ensure that the css border goes inside the image

    jQuery on click shows div but it flickers and disappears

    How can I use webpack to copy files to the distribution folder?

    css hover element to show child, how can I keep the hover css on the parent when I mouseover the child?

    How to put a border around the text in a button?

    How CSS Positions work, why absolute elements stack up on each other instead of stacking one after other

    How to let users have the latest non cached code?

    How to include image into css file using JSF tag

    server-side control - how set background with css ? (link & hover)

    How do you wrap one text div around another that follows as a sibling in the DOM?