">" CSS Operator Addition

New Features
, ,
1

HaxeUI CSS now supports the “>” operator.

So recently, I hit a bit of an edge case: I had a tabview with another tabview inside it, for “reasons” I just wanted to style the outer tabview - simple I thought:

#tabs1 .tabbar {
    border-bottom-color: #d9d9d9;
    padding-left: 0;
}
        
#tabs1 .tabbar-contents {
    border-bottom-color: #d9d9d9;
}

#tabs1 .tabview-content {
    border-color: #d9d9d9;
}

#tabs1 .tabbar-button {
    border: 1px solid #d9d9d9;
    border-top-right-radius: 3px;
    border-top-left-radius: 3px;
}

#tabs1 .tabbar-button-selected {
    border: 1px solid #d9d9d9;
    border-bottom-width: 1px;
    border-bottom-color: white;
    background-color: white;
}

And was a little surprised when I got the result:

image
Upon reflection I realised this made total sense - the .tabbar of the second tabview is indeed a a decedent of #tabs1 so it also matches these rules. Then I remembered how CSS3 handles these types of cases: the > operator.

This operator essentially says that the selector part must be a direct child of the previous selector part (rather than any decedent). This has now been added to HaxeUI, so in my edge case, the css now looks like:

#tabs3 > .tabbar {
    border-bottom-color: #d9d9d9;
    padding-left: 0;
}

#tabs3 > .tabbar .tabbar-contents {
    border-bottom-color: #d9d9d9;
}

#tabs3 > .tabview-content {
    border-color: #d9d9d9;
}

#tabs3 > .tabbar .tabbar-button {
    border: 1px solid #d9d9d9;
    border-top-right-radius: 3px;
    border-top-left-radius: 3px;
}

#tabs3 > .tabbar .tabbar-button-selected {
    border: 1px solid #d9d9d9;
    border-bottom-width: 1px;
    border-bottom-color: white;
    background-color: white;
}

And the result:

image
(notice the >'s)

This actually a very useful feature of CSS to have incorporated into HaxeUI - its likely not massively useful all of the time, but there are certainly little edge cases (like mine) and reasons why you might want to restrict your CSS rules to a “direct child”.

Heres a little example / test: http://haxeui.org/builder/?qklsig

Cheers,
Ian

3 Likes