Failing class selection from CSS in SVG

Question

This is my simple CSS:

.EggChart {
    width: 5000px;
    height: 100px;
}
.EggBar {
    fill: teal;
}

And a simple fragment of HTML

<svg class="EggChart">
    <rect class="EggBar" width="20" height="100" x="0" y="0"></rect>
</svg>

As I would expect this renders a single teal coloured rect within the SVG. The rect is coloured teal as it picks up the colouring correctly from the CSS. However if I change the latter CSS declaration to

.EggChart.EggBar {
    fill: teal;
}

then the rect is black, the CSS styling is not picked up. Why? I thought class selectors in CSS could be strung together so that .EggChart.EggBar would target elements of class .EggBar within those of class .EggChart

score 1 · Accepted Answer · edited Apr 27 '14 at 09:45

1

Use this (note the additional space between both class selectors!):

.EggChart .EggBar {
    fill: teal;
}

The difference between your selector and this one is as follows:

.EggChart.EggBar selects all elements, which have both classes, so e.g., <rect class="EggChart EggBar" /> would be selected.

With the additional space in between .EggChart .EggBar every element with class EggBar that is a descendant of an element with class EggChart is selected.

These "descendant combinators" are described in section 8.1 of the W3C's latest selectors specification.

edited Apr 27 '14 at 09:45

dumbledad

16,305
23
120
273

answered Apr 27 '14 at 07:45

Sirko

72,589
19
149
183

Doesn't that rule target anything with class `.EggChart` and anything with class `.EggBar`? – dumbledad Apr 27 '14 at 07:46
1

@dumbledad Nope, it targets any .eggbar inside any .eggchart. – J. Steen Apr 27 '14 at 07:47
1

@dumbledad To select all with `.EggChart` *or* `.EggBar`, you would use a `,`: `.EggChart , .EggBar`. – Sirko Apr 27 '14 at 07:47

Failing class selection from CSS in SVG

1 Answers1

Linked