If the HTML has elements like this:
id="product42"
id="product43"
...
How do I match all of those id's starting with "product"?
I've seen answers that do this exactly using javascript, but how to do it with only CSS?
[id^=product]
^= indicates "starts with". Conversely, $= indicates "ends with".
The symbols are actually borrowed from Regex syntax, where ^ and $ mean "start of string" and "end of string" respectively.
See the specs for full information.
I'd do it like this:
[id^="product"] {
...
}
Ideally, use a class. This is what classes are for:
<div id="product176" class="product"></div>
<div id="product177" class="product"></div>
<div id="product178" class="product"></div>
And now the selector becomes:
.product {
...
}
Use the attribute selector
[id^=product]{property:value}
I want to share this solution too, maybe in the future it could help someone.
As the others said you can write [id^=product] for id
But we can give an example for the class as well:
[class^="product-"] which indicates classes starts with product
and also * like this [class*="product-"]
This is a simple example :
/* Icons */
[class^="icon-"], [class*=" icon-"] {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: 'mk-font' !important;
font-size: 3em;
}
good luck ...
I noticed that there is another CSS selector that does the same thing .
The syntax is as follows :
[id|="name_id"]
This will select all elements ID which begins with the word enclosed in double quotes.
Related
I have the following in my css file:
md-menu-content.md-menu-bar-menu.md-dense .md-menu > .md-button:after{
display:none;
}
And here's my HTML:
<md-menu-content class="ZZZ">
Hello
</md-menu-content>
I have some Javascript (material design) that adds lots of stuff to the <md-menu-content> elements.
I would like to apply the above CSS to certain <md-menu-content> elements (only if they have the ZZZ class) and leave all others behaving as normal. I'm very stuck. Is this possible in CSS?
To apply the css that you want to all items of the ZZZ class, you should use code like this:
.ZZZ {
//your code here
}
The . before the ZZZ signifies that it applies to items with the class ZZZ. This can be done with any class, as all you have to do is put a . (period) before the class name.
I think you are over thinking this, just use the css styling like you would any other time, and it works just fine. See fiddle: https://jsfiddle.net/pyexm7us/3/
HTML
<md-menu-content class="ZZZ">
Hello
</md-menu-content>
<md-menu-content>
World
</md-menu-content>
CSS
md-menu-content{background-color: red; color: white;}
.ZZZ{background-color: blue; color: white;}
This is absolutely possible with CSS
To apply styling to elements with the same class simply use the prefix .
.ZZZ {
//styling for elements with class ZZZ
}
If you want to work with id's then use the prefix #
#ZZZ {
//styling for elements with the ID ZZZ
}
I'd like to know if there's a way to apply the same styles to IDs that start with the same workds.
For example, I have #youtube_gallery_item_1, #youtube_gallery_item_2,....and the number keeps increasing, so I can't add a new ID every time I add a new item. FYI, I'm working with Wordpress and YouTube SiimpleGallery plugin.
I'd appreciate your help!
The "starts with" selector in CSS3.
div[id^=youtube_gallery_item] {
}
Note that this doesn't work in IE8 and below.
What would be a better idea would be to assign all of your #youtube_gallery_items a class, and then assign styles to that class. I'm sure that the plugin that you're using is doing this. Look at the source code, and if you see that they all have the same class, use:
.name-of-the-class {
}
You can use an attribute selector:
[id^="youtube_gallery_item"] {
color: skyblue;
}
http://jsfiddle.net/p9Ya8/
I would suggest adding a class
.youtube_gallery_item {
background: ;
width: ;
...
}
Its compatible with all browsers and is the easiest way to get around.
<div id="youtube_gallery_item_1" class="youtube_gallery_item"></div>
<div id="youtube_gallery_item_2" class="youtube_gallery_item"></div>
<div id="youtube_gallery_item_3" class="youtube_gallery_item"></div>
How do I use regular expressions in CSS? I found a tutorial here for matching static strings in CSS, but I haven't been able to find one for using regular expressions to match multiple strings in CSS. (I found one here, but I couldn't get it to work. I also looked at the W3C documentation on using regular expressions, but I couldn't make sense of the document.)
I'm want to match a series of <DIV> tags whose ids start at s1 and increase by one (ie. #s1 #s2 #s3...).
I know that div[id^=s], div[id^='s'], and div[id^='s'] each perform the match as I intend it in my CSS. However, each of those also match an id of #section, which I don't want to happen. I believe that "/^s([0-9])+$/" is the equivalent PHP string--I'm just looking for it in CSS version.
There is no way to match elements with a regular expression, even in CSS3. Your best option is probably to simply use a class for your divs.
<style>
.s-div {
// stuff specific to each div
}
</style>
<div id="s1" class="s-div"><!-- stuff --></div>
<div id="s2" class="s-div"><!-- stuff --></div>
<div id="s3" class="s-div"><!-- stuff --></div>
<div id="s4" class="s-div"><!-- stuff --></div>
<div id="s5" class="s-div"><!-- stuff --></div>
Also remember that you can separate multiple class names by a space inside a class attribute.
<div class="class1 class2 class3"></div>
javascript:
/* page scrape the DIV s# id's and generate the style selector */
re=/<div\b[^>]*\b(id=(('|")?)s[0-9]+\2)(\b[^>]*)?>/ig;
alert(
document . body . innerHTML .
match(re) . join("") .
replace(re,"div[$1], ") + "{ styling details here }" );
alert(
("test with <div id=s2 aadf><DIV ID=123> <DIV adf=asf as><Div id='s45'>" +
"<div id=s2a ><DIV ID=s23 > <DIV asdf=as id=S9 ><Div id='x45' >") .
match(re) . join("") .
replace(re,"div[$1], ") + "{ styling details here }"
);
The test yields
div[id=s2], div[id='s45'], div[ID=s23], div[id=S9], { styling details here }
Note the dangling , and the case preserved S9.
If you don't want or can't use the solution posted by #zneak, you could do that editing the labels with javascript, but i'll advice you: It's a hell of work.
The following CSS will select #s0, #s1, ... , #s9 and not #section, though a browser must implement the CCS3 negation :not().
The final selection is equivalent to:
/^s[0-9]?.*[0-9]$/
which says that each id must start with s and a number and end with a number like:
s6, s42, s123, s5xgh7, ...
The :not() line vacuously excludes those ID's that do not start properly using an empty style {}.
<style>
div:not([id^=s0]):not([id^=s1]):not([id^=s2]):not ... :not([id^=s9]) {}
div[id^=s][id$=0], div[id^=s][id$=1], div[id^=s][id$=2], ... div[id^=s][id$=9] { ... }
</style>
CSS3 does not use regular expressions to define selectors BUT ...
CSS Conditional Rules Module Level 3
defines a very specific function, regexp(<string>), that parses a URL with a regular expression when creating an #document rule.
<style>
/* eliminate the alphabet except s - NB some funny characters may be left */
/* HTML id's are case-sensitive - upper case may need exclusion & inclusion */
div[id*=a], div[id*=b], div[id*=c], ..., div[id*=q], div[id*=r] {}
div[id*=t], div[id*=u], div[id*=v], div[id*=w], div[id*=x], div[id*=y], div[id*=z] {}
div[id*='_'], div[id*='-'], div[id*='%'], div[id*='#'] {}
/* s can not be embedded */
div[id*=0s], div[id*=1s], div[id*=2s], ..., div[id*=9s] {}
/* s will be followed by a string of numerals - maybe a funny char or two */
div[id^=s0], div[id^=s1], div[id^=s2], ... div[id^=s9] { ... }
</style>
I have some legacy CSS I wanted to clean up. Person who wrote it is not available for consultation. The following rule does not validate (CSS 2.1):
html[lang=en] q: before, : lang(en) q: before {
content: "“";
}
Would it be safe to assume that the author mean the following (this validates):
html[lang=en] q:before, q:lang(en):before {
content: "“";
}
Also, is the first selector different from the second one in any way? Is each specific to a certain browser?
Thanks.
This selector does not appear to work in Firefox:
: lang(en) q: before
It is probably supposed to be
:lang(en) q:before
Which is not the same as
q:lang(en):before
You can see this in action with the following test case:
:lang(en) q:before {
content: "a";
}
q:lang(en):before {
content: "b";
}
<div lang="en">
<q lang="zh">Hello zh</q> <q lang="en">Hello EN</q> <q>Hello Plain</q>
</div>
This gives
a"Hello zh" b"Hello EN" b"Hello Plain"
Basically the :lang(en) q:before rule says "Before any Q inside any element with English language", while q:lang(en):before says "before any Q that is in the English Language".
Also, the two selectors that are used (html[lang=en] q:before and :lang(en) q:before) are not exactly equivalent but will achieve the same effect most of the time if the browser in question understands one of the selectors. :lang(en) is a newer selector that identifies the language while html[lang=en] is an attribute selector that merely identifes some attribute called lang.
this is definately wrong :
before, : lang(en)
the , : can't be used like this, the comma indicates a new "rule", the colon a pseudp property (like in a:link).
P.S. do content and before work in IE?
I have the following
<p class="main yellow">Hello World</p>
I would like to write a css element that refers to only elements with main and yellow. Is there a way to do this?
Eg. the following doesn't work, but would be what I'm after
.main + .yellow { color:green }
This should grab it:
.main.yellow { color:yellow; }
Though you may get differing results in different browsers. I use QuirksMode to get an idea of what will/won't work cross browser.
You just need to specify them as
.main.yellow { color: green; }
No space between the two classes.
does this work for you?
.main.yellow{
color:green;
}
As others have already said, what you want is:
.main.yellow { color:green; }
However, let me quickly explain why your first attempt didn't work. The + keyword refers to a following element, i.e. the element after.
Your example would have matched the following HTML...
<p class="main">Hello</p>
<p class="yellow">World</p>
...and styled the second paragraph (.yellow) green. So ".main + .yellow" means "select a .yellow that is immediately after a .main".