selector css para muchas etiquetas secundarias

I know it can be done like:

#details > tbody > tr > td:last-child > input ,
#details > tbody > tr > td:last-child > select
{
...
}

Is there a better way? Something closer to:

#details > tbody > tr > td:last-child > (input, select)
{
...
}

preguntado el 09 de septiembre de 13 a las 21:09

No, there isn't. But you could just omit most of the > and child-selectors, the only content for a table tiene estar dentro td or th tags, so all the rest are only rarely required. -

@DavidThomas Yes and no. The tr could be omitted (as you say, td/th elements must be children of tr elements), but it is not unusual to style a th within a thead different from a th within a tbody. If the OP has nested tables, then none of it can be omitted. -

I strongly recommend using classes for situations like these. -

I have to say, this being the first question I ever ask here... you guys are fast! :) On topic: @user2620860: In general, that might be the best option, however, I don't always like the class approach because sometimes I'm already using a class in the markup for other purposes... In my experience class attributes like "class1 class2 class3" are harder to read and make the markup a lot uglier... -

3 Respuestas

No. CSS offers no such thing. A CSS Preprocessor (Sass, LESS, etc.) could make it simpler to escribir such a selector, but the generated CSS will be exactly what you already have.

#details > tbody > tr > td:last-child {
    > input, > select {
        // styles
    }
}

Respondido el 09 de Septiembre de 13 a las 21:09

No, there isn't anything like this. In addition, you're overqualifing your selectors and this lead to poor performance.

If you want to use a more expressive language to write your CSS, use SCSS preferiblemente.

Respondido el 09 de Septiembre de 13 a las 21:09

I didn't know over-qualifying was a "bad practice" in CSS... I always tend to qualify as much as possible, since I believe it makes the code easier to understand... - Ferc

Without more context the answer is no. For specific examples it might be possible to write equivalent selectors that are shorter, for example

#details > tbody > tr > td:last-child > :not(div)

but you should avoid this because it makes for brittle styles (prone to introducing unintended effects when your markup changes).

Just go with what works.

Respondido el 09 de Septiembre de 13 a las 21:09

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.