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

    WordPress - How to Disable a filter used by media.php from function.php? [closed]

    How can I split a text in 2 color vertically?

    How to style Text input in jQuery editable

    How to make a CSS element extend beyond all borders of containing div?

    How to center video source in circle shape using css, html

    How to deselect with CSS?

    How can I resize an image, added via ajax, to fit within specific dimensions while maintaining aspect ratio using JQuery/CSS?

    How to get the ultimate, final calculated style value on an HTML element?

    How to center the Nav-Bar

    How to set responsively images on images to appear fixed using HTML+CSS+JS?

    How to align form at the center of the page in html/css

    How to make an element with opacity 0 unclickable

    How to modify css class of container for specific element ID

    Infuriating gap: How do you get rid of a gap between IMG and surrounding content

    How to use dp to calculate shadows - web development HTML CSS

    How Do you combine CSS code to an HTML code? I want to Combine them? [closed]

    How to use GitHub's primer and octicons?

    Mobile-Friendly CSS - How to hide a sidebar? [closed]

    How to expand link on hoover? Add “<” “>” symbols around link?

    How to get Owl Carousel Owl-Page (dots) Responsive

    CSS and JS: How to Inflate the Size of a Tile In Grid

    How to use window height in css using jquery

    how to position a search bar in html/css

    How to remove all pseudo selectors from a CSS selector string using Javascript?

    how to align vertically a dynamic-height div inside another fixed height div

    How to prevent the scroll of table when click to header on Chrome?

    Showing calendar exactly below a textbox

    how do you modify the actual css of a class rather than add a style to each element of that class? [duplicate]

    How can I format all td elements contained in a table with class myclass in CSS?

    How to do automatic reload of page when viewed in iPad Portrait mode?