CODEWITHSUNDEEP
csslesscss-selectors
Benjamin
Benjamin

Reputation: 43

Combine [attribute=value] with :nth-child()

I'm using LESS and want to match an special input whose type is text.

Currently, I'm doing this:

td {
    input[type=text] {
        width: 100px;
    }
}

For my second input of type checkbox, I need another width. I tried this:

td {
    input[type=text] {
        width: 100px;

        &:nth-child(2) {
             width: 40px;
        }
    }
}

But this won't work. Any ideas how to combine [type=text] with :nth-child()?

Upvotes: 4

Views: 7329

Answers (1)

BoltClock
BoltClock

Reputation: 724342

Your LESS should translate to the following CSS without any bugs:

td input[type=text] {
    width: 100px;
}

td input[type=text]:nth-child(2) {
    width: 40px;
}

However, if you have other elements as siblings of your text inputs, these may be interfering with the :nth-child() declaration, as :nth-child() only looks at an element's position relative to all its other siblings in the same parent, not only to other elements of its kind (i.e. input[type=text]). For example, if you had a label as the second child, then your input won't be the second child anymore as that spot has been taken by the label.

If the only inputs you have within your td are all of [type=text] you should be able to get away with using :nth-of-type() instead:

// LESS

td {
    input[type=text] {
        width: 100px;

        &:nth-of-type(2) {
             width: 40px;
        }
    }
}

/* CSS */

td input[type=text] {
    width: 100px;
}

td input[type=text]:nth-of-type(2) {
    width: 40px;
}

Just remember, though, that it only looks at the element name input and not the [type=text] attribute!

Or if you know you'll only have two text inputs you can use the general sibling selector instead to grab the one that follows the first input:

// LESS

td {
    input[type=text] {
        width: 100px;

        & ~ input[type=text] {
             width: 40px;
        }
    }
}

/* CSS */

td input[type=text] {
    width: 100px;
}

td input[type=text] ~ input[type=text] {
    width: 40px;
}

Upvotes: 7

Related Questions