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..

    SceneBuilder (by gluon) doesn't show imported fonts

    How to get rid of spaces with CSS

    Flex 4 How to set background image to VBox?

    How to wrap UL list - LIs on new line with css

    How to display 20 columns in html design

    Show and Hide option for DIV(needs modification)

    HTML & CSS - Table attribute in CSS is behaving usual. Don't know how to fix it

    How to specifiy the order of CSS classes?

    How to make css-menu independent of the number of menu items?

    HTML+CSS: How to add arrow to horizontal menu items?

    How to add nav icon images using max-width property in CSS

    How to get CSS class property in Javascript?

    How to join multiple rounded images one by one using line in css or css3

    How to Apply CSS to element added by Javascript

    Box-shadow is overlapping other elements, how can I fix it?

    How do I stop internet explorer's propriety gradient filter from cutting off content that should overflow?

    How to align an iframe horizontally (in the centre of the screen) with CSS?

    How to prevent inner text resizing in CSS Animation @keyframes?

    how to zoom in an image and center it

    How to create a sliding animation on menu hover with jQuery?

    How to remove blue underline on text in Chrome - CSS?

    Jquery datepicker only year and month how to set CSS to hide calendar when there are severals datepickers?

    How to center text inside div in this specific situation? [duplicate]

    How to keep indent in lists with CSS?

    How to ignore

    CSS rules in wordpress theme?

    Bootstrap: How to apply certain CSS rules, when on different devices [duplicate]

    How to create a div with a diagonal (or angled) top line

    How to remove Clear:Both in CSS

    How to make the search form without the search button?

    I have a link icon next to each link. How do I exclude the link icon from images?