My class names generate dynamically and I'm trying to apply styling to them using a kind of preg_match. Is something like this possible?
<style>
.*_class {
border: 1px solid red;
}
</style>
<div id="a_class">a</div>
<div id="b_class">b</div>
<div id="c_class">c</div>
You need to use attribute selectors for this.
[id$="_class"] {
}
The above says, anything with an id that ends with _class should be selected. For more information, see attribute selectors at MDN.
Perhaps reconsider how your classes are generated. While Praveen's answer will work and directly answers the question, attribute selectors can be inefficient. You might want to consider leveraging the fact you can have more than one class per element. E.g.
.class {color:#F00;}
.a.class {font-weight:bold; font-size:2em;}
<div class="a class">a</div>
<div class="b class">b</div>
<div class="c class">c</div>
Related
Let's say I have an html element with a class of box:
<p class="box alert">Content here</p>
Recently I learned about a way of targeting elements in CSS, so if I want to select any element with a class of box I could use this:
*[class~=box] {border: 2px solid grey;}
And I'm wondering, isn't it literally the same as just targeting an element by a class name? Or I didn't get it correctly?
.box {border: 2px solid grey;}
If it is the same, in which situations it is appropriate to use the second method rather than the first one?
An attribute selector is not really designed for classes, it is designed for other attributes in elements for example a[href*="google"], but yes you can style elements like this and that would be definitely considered an anti-pattern.
Although .classname and [class~="classname"] would style the same elements the CSS specificity of those selectors would be calculated differently - to be honest, I'm not exactly sure but *[class~="classname"] could win with .classname and it's something a person working with styles which had been written like that should be aware of.
For the sake of selecting, the selectors are indeed equivalent. The differences between them are both practical and historical.
Practical difference
From a practical point of view, the class selector is far more readable and straightforward. It is also far more efficient, since browsers treat classes differently than other attributes, for CSS and DOM queries. The attribute selector in general makes more sense for any other attribute that is not a class, when you wish to select by a single value out of "a whitespace-separated list of words, one of which is exactly value" (MDN spec).
For example, if you have a data attribute with several possible values to choose from like so:
<div data-colors="blue">
<div data-colors="yellow blue">
<div data-colors="red blue green">
The attribute selector [data-colors~=blue] would select all three elements, regardless of any other values in the attribute.
Historical difference
Historically, the class selector .box is part of the original CSS specification (.i.e "CSS 1"). This means this selector is supported by any browser past and present. On the other hand, the attribute selector [class~=box] is only part of the second iteration of the CSS specification (i.e. "CSS2") and is therefore not supported by every possible browser; though you would have to go back as far as Internet Explorer 6 to run into issues with this selector.
One important difference is the use of some special names with your classes.
Here is an example to illustrate:
.box {
height:50px;
background:red;
margin:5px;
}
.80% {
width:80%;
}
.50% {
width:50%;
}
<div class="box 80%"></div>
<div class="box 50%"></div>
In the above nothing will happen because we need to escape the number and % inside the selector but with the attribute selector it's easy:
.box {
height:50px;
background:red;
margin:5px;
}
[class~="80%"] {
width:80%;
}
[class~="50%"] {
width:50%;
}
<div class="box 80%"></div>
<div class="box 50%"></div>
For the first you need to write the following which is no trivial:
.box {
height:50px;
background:red;
margin:5px;
}
.\38 0\% {
width:80%;
}
.\35 0\% {
width:50%;
}
<div class="box 80%"></div>
<div class="box 50%"></div>
Both would have exactly the same result so *[class~="classname"] is equivalent to .classname, just that the selection is made using the class attribute. See attribute selector to get more info on this syntax.
.classname {
color: blue;
}
*[class~="classname"] {
color: red;
}
<p class="classname">Content here</p>
*[class~="classname"] {
color: red;
}
.classname {
color: blue;
}
<p class="classname">Content here</p>
<div class="wrapper">
<!--
Several random elements that I'm not able to predict.
div, p, h3, etc.
-->
<div class="foo">...</div>
<!--
Could have only 1 .foo, 2 .foo, or 3, 4, 5 .foo...
-->
<div class="foo">...</div>
<!--
Also several random elements
-->
</div>
HTML code is something like above. Now I know the reason why div.foo:first-of-type doesn't work. But is there any alternative solution?
How can I select the first .foo? How can I select the last .foo? Of course via pure css...
Thanks!
How can I select the first .foo?
The technique described here: CSS selector for first element with class:
div.foo {
/* Style all */
}
div.foo ~ div.foo {
/* Revert styles for all but the first */
}
How can I select the last .foo?
The technique described above relies on sibling selectors and overrides. The biggest limitation of sibling selectors is that they only work in one direction, and since they work for the first element by overriding for all elements after the first, they won't work for the last because you can't select siblings that come before some other element using sibling selectors.
There is no pure CSS alternative.
Any HTML5 browser will let you use nth-of-type as it is intended...
I am not saying this is a recomended technique, I am just showing how this option works ...
I don't know if you will like it or not, but AFAIK is the only way to get what you want for the last one (as BoltClock says)
foo:first-of-type {
background-color: lightgreen;
}
foo:last-of-type {
background-color: lightblue;
}
<div>
<div>div</div>
<foo>foo</foo>
<div>div</div>
<foo>foo</foo>
<div>div</div>
<foo>foo</foo>
</div>
you can use first-child, and last-child
html
<div class="wrapper">
<p>1</p>
<p>2</p>
<p>3</p>
</div>
css
p:first-child {
color: red;
}
p:last-child {
color: green;
}
Here's a JsFiddle Example
Beware that last-child is only supported since IE 9, and first-child is supported from IE 7
I would like to know how I can apply the CSS of one class in another. I did little bit of research on this and I found two solutions.
Using LESS
Specify both the classes like class="content colorTxt"
Unfortunately I cannot use both these options. Because I have permission to edit only the CSS files. So it would be great if you can let me know if there is any other option. Something like below:
.colorTxt{
color: Blue;
}
.content, .colorTxt
{
}
I tried this option, but it doesn't work. Please let me know what can be done.
What you're trying to achive is not possible with pure CSS.
There is one case when .content is the descendant of .colorTxt, but even then all that you can is inherit some know properties of .colorTxt, nothing more.
<div class="colorTxt">
<div class="content"></div>
</div>
.colorTxt { color: blue; }
.content { color: inherit; }
Does someone know how to use the CSS selector :not() as #some_id:not(.any_class_name)?
The code looks as if it is right, but it doesn't work. Is there another way without the not selector? I couldn't find anything on the Internet.
I am making a web application, which includes more than one page, but several pages have divs with id=some_id. I thought I had to add specific CSS by adding any_class_name one time using the above CSS code solve the problem, but it doesn't work.
I believe that you are reversing the selectors. You have some elements with the same class, but you want to filter out an element with an specific ID. In that case:
HTML:
<p class="someclass">hello</p> <!-- will be targeted by css below, thus green -->
<p class="someclass" id="some-id">hi</p> <!-- will not be targeted by css below -->
CSS:
.someclass:not(#some-id){ color: green; }
/* selects all elements with classname 'someclass',
but excludes the one that has also has an id of 'some-id' */
And as #secretSquirrel pointed out, note the browser compatibility: this selector is not supported by Internet Explorer 8 and older.
This will set all the backgrounds except the ones that has <a></a>:
:not(a)
{
background: gray;
}
I hope this will help you.
Demo
Another way is:
You can override the css. May be you want something like this.
<div id="demo">
<p class="class">This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
Your css
#demo
{
color:#0000ff;
}
.class
{
color:#ff0000;
}
<div id="tt">test1</div>
<div id="blabla">test2</div>
<div id="test">
<div id="blabla">test3</div>
<div id="tt">test4</div>
</div>
<style>
#tt {color:blue;}
#blabla {color:green;}
#test #tt, #test #blabla etc... {color:red;}
</style>
Is there a way to avoid repeating #test?
Thanks ;)
For the particular example that was the question before it underwent major revisions:
* { color: red }
CSS is very much about context though. It isn't very good when dealing with hypotheticals that have little resemblance to the real code.
Depends on what you want to do. If you want all the text nodes to be red and the parent element is #test, then you just need #test {color:red}. If you need to be more specific, and give a color only for a child, then you can use .child {color:blue}, but if you want to color a child of #test, then you will need to specify the ancestor descendant, in other words #test .child {color:green}
Edit
Example according my comment http://jsbin.com/udoya3
Instead of using id here, you should use id and class. An id should be unique : one id, one element. Class aren't unique. A class can have more than one element.
<style>
.tt,.t {color:red;}
</style>
<div class="tt">test1</div>
<div id="test">
<div class="tt">test2</div>
</div>
#test, #t, #tt { color:red; }
is perfectly valid code.
an #id takes precedence over any other styling (ie a class) which can have adverse effects, but may also be desired.
what are you actually trying to do? save a few characters when writing your css?