How to get CSS to select ID of specific pattern? [duplicate]


Tags: css,css3

Problem :

This question already has an answer here:

The html page contains div ID s like q1r1, q1r2, q1r3,q2r1,q2r2,q2r3,.... How to select these ID in CSS to apply styles at once? If ID's were just q1,q2, q3.., it could be done as id^="q".



Solution :

You can do [id^q]:

JS Fiddle

[id^=q] {
  // common styles
}

And if there is a certain id you would like to omit you can use [id^=q]:not(#idname):

JS Fiddle


OR if you want to exclude ids that start with a certain pattern, combined the two like:

JS Fiddle

/* All ids that start with "q" but not "qr" */
[id^=q]:not([id^=qr]) { 
  // Styles here
}

BUT I would absolutely recommend adding a common class since that is for what they are designed. If an id can be added via python, I would think a class could be added as well.


    CSS Howto..

    How to change color of footer? (Materialize)

    How to include PHP code in CSS?

    How to get an image to resize on scroll?

    How do I force span elements to remain in place between variable length text and an image element?

    How to get rid of white space between round image and border in HTML/CSS/Bootstrap?

    How to import Google Web Font in CSS file?

    How to achieve glow element using CSS in plain div like described below?

    How to load an image with css using Django

    jQuery UI how to avoid submit button getting css classes?

    jquery - how to queue up a series of css property changes

    How can one use scroll bar images?

    How to silently hide “Image not found” icon when src source image is not found

    How to select 3rd div which has specific css class

    How to remove the blue border around ImageMap control in the Internet Explorer?

    How to add shadow 'wings' to a centered content div

    How to do this kind of Button in CSS?

    How to align with css

    how can i make the li inside the div be horizontal?

    How to remove a CSS style on the fly

    How to make width of element full width of screen and not parent css

    How to apply a class in the current slide using bxslider?

    How to extend jQuery.css from plugin

    How to change css by using tag or class name in typescript?

    How to align / valign css-rotated span within its parent div

    float css only menu - how to modify on section2

    CSS selector problem. Any ideas how to select this?

    How can I apply a CSS class to an element with a given id, without modifying the element?

    how to dynamically remove css in Angular?

    How to have a hidable paragraph in an HTML email template

    Phonegap : how Control the font size of the Mobile?