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

css, css-selectors, less

Solution

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;
}

Problem

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()`?

Original source