about css style in gwt

[tong123123]

in gwt developer guilde http://code.google.com/webtoolkit/doc/latest/DevGuideUiCss.html

complex style section:

 .gwt-MenuBar { 
       /* properties applying to the menu bar itself */ 
   }
   .gwt-MenuBar .gwt-MenuItem { 
       /* properties applying to the menu bar's menu items */ 
   }
   .gwt-MenuBar .gwt-MenuItem-selected { 
       /* properties applying to the menu bar's selected menu items */
   }

I cannout underatand, why the css rule is

.gwt-MenuBar .gwt-MenuItem

but not

.gwt-MenuItem
?
I am not good in css, is
.gwt-MenuBar .gwt-MenuItem
 is equal to just one css class? not any special meaning for the prefix .gwt-MenuBar, that is
we can rename it as 
.gwt-MenuBargwt-MenuItem will not any different?

[Joseph Lust]

ton123123,

The intent is to prevent CSS namespace pollution. It is common
practice to use a makeshift namespace for your CSS selectors so as not
to break existing CSS selectors. Say for example you had a rule for
".closeButton" . If anyone else used that selector in their module,
you might be overriding and breaking their CSS. So, you use a
makeshift namespace. Let's say everything in your module is inside a
container, then you could make that selector
".myModuleContainer .closeButton" and now it will only apply to your
module and not break any others.

This is why ".gwt-MenuBar .gwt-MenuItem" is used. There could be ".gwt-
MenuItem" items that appear in places other than the menubar, so use
this more specific selector to only apply to the menu items of
interest.

A better step is to use the CSSResource feature of GWT, and then
you'll never need to worry about these collisions as each selector can
have a unique name, and your CSS will parse faster.
https://code.google.com/p/google-web-toolkit/wiki/CssResourceCookbook

Hope that helps.


Sincerely,
Joseph

On Feb 29, 10:43 pm, tong123123 <tong123...@gmail.com> wrote:
> in gwt developer guildehttp://code.google.com/webtoolkit/doc/latest/DevGuideUiCss.html

[Kei Kei]

Sorry, I still have something not clear.
if the css selector is
.gwt-MenuBar .gwt-MenuItem

then under normal html, how to use it?
class="gwt-MenuItem"
class="gwt-MenuBar .gwt-MenuItem"
seems both does not work.

I try to create a label, and if I write the css as
.gwt-Label .innerTitle
then I found no method to use it, but if I just write
.innerTitle
then in gwt, I can simply use
addStyleName("innerTitle");

--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.

To post to this group, send email to google-we...@googlegroups.com.
To unsubscribe from this group, send email to google-web-tool...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.

[Joseph Lust]

tong,

The parent element must have the first class in the CSS selector and the element (child of parent) must have the second CSS selector class.

i.e.

<div class="gwt-MenuBar">

<div class="gwt-MenuBarItem"></div>

</div>

Note also that you don't want to use the '.' character that was in the selector in the actual CSS class name in HTML.

Sincerely,

Joseph