CODEWITHSUNDEEP
javascriptcss
user1357015
user1357015

Reputation: 11686

CSS selecting chart in svg tag

I have the following html structure 

   <div class="_container">
      <div id="chart-3" class="chart with-3d-shadow with-transitions">
          <svg class=".svg">
              <text class="nvd3 nv-noData" >No Data Available.</text>
      </svg>
   </div>

I've tried checking if the "nv-noData exists" using the following but can't seem to get it to work:

        if ($('._container > .chart > .svg > .nv-noData').length > 0) { 
            alert("No Data!");  
        }

However, the following does throw an alert:

        if ($('._container > .chart > .svg > nv-noData').length > 0) { 
            alert("No Data!");  
        }

Being new to CSS, an explanation of why would be helpful to.

Also, if I removed the class = ".svg", how would the CSS change?

Upvotes: 0

Views: 217

Answers (1)

Joeytje50
Joeytje50

Reputation: 19112

Classes are selected via .classname, but defined via class="classname". So in your example, your class name should be:

<svg class="svg">
    <text class="nvd3 nv-noData" >No Data Available.</text>
</svg>

and it would be selected via:

$('._container > .chart > .svg > .nv-noData')

This also has a dot before the .nv-noData selector, since you're selecting a class here.

Alternatively, you can omit the class tag altogether, and just use:

$('._container > .chart > svg > .nv-noData')

notice that I didn't put a . in front of the svg selector. This causes the selector to select svg tags instead of classes. This would then also work without the class:

<svg>
    <text class="nvd3 nv-noData" >No Data Available.</text>
</svg>

So in summary: If you select something with a dot in front of it, it will select a class name, and if you select it without dot in front of it, it will select the tag name. this reference also lists most other selectors there are, and this is the official reference

Upvotes: 1

Related Questions