A dynamic CSS style class that has a space or comma
I am setting the style class dynamically based on the state value, for example:
<h:outputText value="#{item.status}" styleClass="#{item.status}"/>
And some rendered examples:
<span class="Incomplete">Incomplete</span>
<span class="Expired">Expired</span>
<span class="Expiring Soon">Expiring Soon</span>
<span class="Incomplete, Overdue">Incomplete, Overdue</span>
The value is in a database that I have no control over. How can I use CSS styles to target them? Even though the last two have a space and a comma, they are all truly separate classes.
This is what I have that works, but does it work randomly or correctly?
For Expired
or Incomplete
I want red:
.Expired, .Incomplete {
color: white;
background-color: red;
}
For Expiring Soon
i want yellow
.Expiring, .Soon {
color: black;
background-color: yellow;
}
An Incomplete, Overdue
:
.Incomplete, .Overdue {
color: white;
background-color: red;
}
source to share
This is what I have that works, but does it work randomly or correctly?
Your examples only work because in those specific examples, the CSS treats your single class as two separate classes. Especially this:
<span class="Incomplete, Overdue">Incomplete, Overdue</span>
.Incomplete, .Overdue {
color: white;
background-color: red;
}
only works because of .Overdue
. To use commas and spaces in class names, you must do it like this:
[class="Incomplete, Overdue"] {
color: white;
background-color: red;
}
<span class="Incomplete Overdue">Incomplete Overdue</span>
<span class="Incomplete, Overdue">Incomplete, Overdue</span>
The above section is called an attribute selector .
It is also possible to avoid some characters like the comma in CSS ( .Incomplete\, { ... }
). For the simplest thing, you can just combine this with the concept of CSS selector grouping. In fact, in the HTML .Inclomplete,
and .Overdue
have two selectors, but with the following CSS, we can say that there should only be selected a combination of both (with a space between them) (which will then behave as a single class)
.Incomplete\,.Overdue {
color: white;
background-color: red;
}
<span class="Incomplete Overdue">Incomplete Overdue</span>
<span class="Incomplete, Overdue">Incomplete, Overdue</span>
<span class="Overdue">Overdue</span>
source to share
For Expired or Incomplete I want Red
.Expired, .Incomplete { color: white; background-color: red; }
Right: OR
Expires Soon I want Yellow
.Expiring, .Soon { color: black; background-color: yellow; }
Here you have to use AND
, which means no comma, spaces:
.Expiring.Soon {
color: black;
background-color: yellow;
}
(Otherwise, every entry that is ETERER .Expiring
OR .Soon
will be yellow.)
Invalid comma
in HTML (CSS classes are separated by spaces). I'm not sure if this has an impact. This may depend on the browser, regardless of whether it analyzes it as two classes ( Incomplete
and Overdue
), or even as two class one containing a comma ( Incomplete,
and Overdue
)
I did some quick tests about comma
. It seems that the browser (Internet Explorer, Chrome and Firefox) is ignoring classes containing ,
HTML markup inside.
This means that your last example
<span class="Incomplete, Overdue">Incomplete, Overdue</span>
just displays as
<span class="Overdue">Incomplete, Overdue</span>
.test1 {
background-color:red;
}
.test2 {
border:2px solid blue;
}
<div class="test1, test2">
with comma after test1
</div>
<div class="test1 test2,">
with comma after test2
</div>
<div class="test1,test2">
with comma no whitespace
</div>
<div class="test1 , test2">
with comma double whitespace
</div>
source to share
If you can't change the HTML, you can target like this ...
.Expired,
.Incomplete {
color: white;
background-color: red;
}
.Expiring.Soon {
color: black;
background-color: yellow;
}
.Overdue {
color: white;
background-color: blue;
}
<span class="Incomplete">Incomplete</span>
<span class="Expired">Expired</span>
<span class="Expiring Soon">Expiring Soon</span>
<span class="Incomplete, Overdue">Incomplete, Overdue</span>
source to share