CODEWITHSUNDEEP
htmlcsstwitter-bootstrapless
plywoods
plywoods

Reputation: 257

How to use nested rules in less?

I am trying to customize bootstrap styles for my needs. I use LESS. I have a table with the table-hover class. I need to add an extra behaviour to the hover effect. I want to add visible (left) border to a row when it is hovered. I took the standard bootstrap rule and nested an additional styles inside:

.table-hover > tbody > tr:hover > td,
.table-hover > tbody > tr:hover > th {
background-color: #f5f5f5;

tr {
    border-left: 4px;
    border-left-color: @active-element-color;
    border-left-style: solid;
}
}

Unfortunately this doesn't work.

enter image description here

Upvotes: 0

Views: 90

Answers (2)

zessx
zessx

Reputation: 68820

You must use the right order for nested rules :

.table-hover > tbody > tr {
    /* Match every <tr> in a .table-hover */
    border-left: 4px;
    border-left-color: transparent;
    border-left-style: solid;

    &:hover {
        /* Match hover stats for these <tr> */
        border-left-color: @active-element-color;

        > th, 
        > td {
            /* Match <th> and <td> for hovered <tr> */
            background-color: #f5f5f5;
        }
    }
}

In your example you were trying to target .table-hover > tbody > tr:hover > th tr :

<table class="table-hover">
    <tbody>
        <tr> <!-- :hover -->
            <th>
                <tr><!-- Targeted element --></tr>
            </th>
        </tr>
    </tbody>
</table>

Upvotes: 1

Denys S&#233;guret
Denys S&#233;guret

Reputation: 382394

I'm not sure of your intent but it looks like you want this :

.table-hover > tbody > tr:hover {
    border-left-width: 4px;
    border-left-color: @active-element-color;
    border-left-style: solid;
    & > th, & > td {
        background-color: #f5f5f5;
    }
}

Upvotes: 0

Related Questions