How to refer to css class that has spaces in it?

[dcnguyen]

My CMS is generating div classes such as:

<div class='view-field view-data-image-nid'>


How do I refer to that class in the css? Doing ".view-field view-data-image-nid" doesn't seem to work...

 

[Borvik]

That is because css doesn't support class names with spaces. That code you provided shows a div with two different classes applied to it.

 

[Vragabond]

To expand on Borvik's reply. In CSS, space means something. Likewise it means something in HTML class attribute as well.

In HTML class attribute, space is used to apply more than one class name to the element. Like Borvik said, class="view-field view-data-image-nid" would mean both .view-field and .view-data-image-nid are applied to the element.

In CSS, space is used for descendant selector. So, if you would put the thing in a way you did (.view-field view-data-image-nid), it would mean the following:

Select an element called 'view-data-image-nid' that is a descendant of an element with a class names 'view-field'. Because there is no element with the name like above and because that element would also not be inside the element with the above class, your declaration will never get applied.

 

[dcnguyen]

So, refer to it as:


.view-field .view-data-image-nid { }


?

 

[Borvik]

By doing .view-field .view-data-image-nid{} you are saying a element with the class view-data-image-nid is contained within an element with the class view-field.

What you need to do, is evaluate the styles you wish to apply to this element, and separate them into .view-field and .view-data-image-nid - depending various requirements. For example one question to ask in this analysis: Does a style always have to be applied to a view-field, even when there isn't a view-data-image-nid?

 

[dcnguyen]

Yes, that is what I wanted (your former statement)...styling an element within another element...I was correct, except there shouldn't be a space between the two classes (didn't realize it was just standard dot notation)...

Thanks for your help

 

[Borvik]

Not a problem - glad to be of service.