How to apply css selector in ZK

Question

Here are some part of my codings inside index.zul :

<grid>
    <columns>
        <column/>
        <column/>
    </columns>
    <rows>
        <row>
            <label value="${labels.personal.name}"/>
            <label value="@load(vm.personal.name)"/>
        </row>
        <row>
            <label value="${labels.personal.id}"/>
            <label value="@load(vm.personal.id)"/>
        </row>
    <rows>
<grid>

I tried to use the CSS below but somehow it bold every label inside row element.

.z-label:FIRST-CHILD{
    font-weight: bold;
}

So, how can I apply font-weight only to the first label tag for each row element ?

Answer 1

You can use the sclass attribute so your css is applied with the default css.

<style>
    .bold{
        font-weight: bold;
    }
</style>
<grid>
    <columns>
         <column/>
         <column/>
    </columns>
    <rows>
        <row>
            <label value="${labels.personal.name}" sclass="bold"/>
            <label value="@load(vm.personal.name)"/>
        </row>
        <row>
            <label value="${labels.personal.id}" sclass="bold"/>
            <label value="@load(vm.personal.id)"/>
        </row>
    </rows>
</grid>

You can test it in this fiddle.

Update:

I looked around in the DOM and played a little further with the css selectors so I came to this solution

.z-row-inner:first-child .z-label {
    font-weight:bold;
}