How to set nested css classes into CssResources

Question

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?

Manolo Carrasco Moñino · Accepted Answer · 2013-11-16 08:52:30Z

2

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.

answered Nov 16, 2013 at 8:52

Manolo Carrasco Moñino

9,7411 gold badge24 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ace · Accepted Answer · 2014-08-10 21:16:07Z

1

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.

edited Aug 10, 2014 at 21:16

answered Nov 16, 2013 at 4:30

Ace

9694 silver badges10 bronze badges

Collectives™ on Stack Overflow

How to set nested css classes into CssResources

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related