Tizen Forums

Thanks, I know other approaches as well, but the point of this post is to figure out why I can't chain single element selectors like #someId.someClass.someOtherClass

This is html

<a id="container-top-left" class="light-button on"></a>

This is complete css for that element

.light-button {
    display: inline-block;
    width: 179px;
    height: 179px;
    background: black no-repeat;
    background-size: 90px 90px;
}
#container-top-left {
    border-right: 1px #4f4f4f solid;
    border-bottom: 1px #4f4f4f solid;
    background-image: url("../images/icon-off.png");
    background-position: 59px 59px;
}
#container-top-left.on {
    background-image: url("../images/icon-on.png");
}

According to your html code you have button 'on' at start. I am not sure what your are going to have finally but removing 'on'  sets image to icon-off.png - button is off state. Seems it works correctly.

That is correct:

a#container-top-left:active{

...

}

I know its on at start, that is not the point. Of course I am gonna change the on state with javascript (adding/removing class).
THE POINT is, that the code above will produce a button with icon-off instead of icon-on as a background - which means that this selector #container-top-left.on doesn't work.

Please if you try the code I provided to you (please supply some dummy icons or use background color) will you see the background included in #container-top-left.on?

Thanks

Well, I'm not he, but have tried as you wrote above and your css code works correctly on Tizen 3.0 emulator.

What I've done was:

1. create a s Tizen project. (with mobile 3.0 profile and select templet "BasicUI")

2. added icons (icon-on.png, icon-off.png) into "images" folder

3. added CSS code you wrote with background color change to white (because the  icons are in black-and-white so needed to change it to display them correctly.)

4. added a html line you wrote above.

5. launch the app on tizen 3.0 mobile emulator

Then I can see the "icon-on.png" as the background as you have designed.

If I remove the "on" part of the 'container-top-left' class in html, I can see "icon-off.png" as you expected.

So I wonder what is your platform to run the code.

Thank you Kim,

I don't understand then why it doesn't work for me. Do I have to load some special libraries or something? I tried to run the code in 3.0 emulator as well as gear sport watches which run 3.0.1.

I have to add, that I was building web widget, not web app, is it possible that it does not work for web widgets?

I have tried a web widget project and the symptom happens. It looks a kind of bug at all.

For your work arround, you'd better define ".on" and ".off" instead of "#container-top-left" and "#container-top-left.on" for now.

Web widget has some limitation compared to web application ... 

Is there any document about it somewhere? If there is, let us know please.

And if the limitation is not published to user properly, the limitation should be called as 'bug'.

Most of these are now declared ... so i can tell these as limitations ...for example

* The Web widget engine does not support HTML heading styles (h1, h2, ..., h6).

* The Web widget engine does not support hyperlinks.

* Web widget engine does not support iframes.

* The Web widget engine does not support the <form> element. 

* The Web widget engine does not support innerHTML and innerText properties. 

* For Web widget content that is less than or equal to 50 kB... so TAU can be included for this reason 

See here https://developer.tizen.org/development/guides/web-application/application-management/applications/widget-application#user-content-how-are-click--touch-events-handled-in-web-widgets

Thank you for investigating.

It is quite disappointing though. Developers should not be restricted like that. I understand some things like <a> can be an issue, but some restrictions are unreasonable.

Anyway, thank you again.