Pero
Pero

Reputation: 794

How to set nested css classes into CssResources

for example i have this html div structure

<div class="parent">
   <div class="child1">
      <div class="child21"></div>
      <div class="child22"></div>
   </div>
</div>

and these r the corresponding classes

.parent{ /*stuff*/}
.parent .child1{/*stuff*/}
.parent .child1 .child21{/*stuff*/}
.parent .child1 .child22{/*stuff*/}

So how to set the class names in the CssResource for these nested divs. I tried different combinations but no one works. I will show some of these combinations which dont work.

public interface CssStuff extends CssResource{
      public String parent();  // works

      Classname("parent child1")
      public String child1();   // dont work

      Classname("parent .child1 .child21")
      public String child21();   // dont work

      Classname("parent.child1.child22")
      public String child22();   // dont work
 }

I get following error messages:

Replacing CSS class names The following obfuscated style classes were missing from the CSS file: parent .child1: Fix by adding .parent .child1{}

and so on.

I mean the classes are existing in the CSS file. So whats wrong and how to set these classes in the CssResource?

Upvotes: 0

Views: 219

Answers (2)

Ace
Ace

Reputation: 969

I'm not sure how to use GWT, but I do know that "parent" in every example is not referred to as a class, as it is missing a "."

To target a css selector child it would be

.parent .child1
.parent .child1 .child21

If you have multiple classes on a DOM element such as

<div class="parent child1">

The resulting selector would be

.parent.child1

You have this correct in your css example, but as I stated before I'm not familiar with GWT.

Upvotes: 1

Nested classnames are just classnames, so just change your code to:

public interface CssStuff extends CssResource{
  public String parent();
  public String child1();
  public String child21();
  public String child22();
}

And you will get the obfuscated named of those classes, to use in your widgets.

Upvotes: 2

Related Questions