How to target a group of long similar CSS selectors on one line?

Question

I am currently often using in my CSS things like

table.form > tbody > tr > td > input[type=text], 
table.form > tbody > tr > td > inp         


        

Answer 1

Using mozilla Firefox and Webkit based web browsers, you could use :any() pseudo-class to target a group of elements at once.

The :any() pseudo-class lets you quickly construct sets of similar selectors by establishing groups from which any of the included items will match. This is an alternative to having to repeat the entire selector for the one item that varies.

Mozilla Developer Network

Syntax

:-moz-any( selector[, selector]* )
:-webkit-any( selector[, selector]* )

In this particular case:

/* For FF 4+ */
table.form > tbody > tr > td > :-moz-any(input[type=text],input[type=password],textarea,select) {width: 300px;}
/* For Chrome 12+, Safari 5.1.3+ */
table.form > tbody > tr > td > :-webkit-any(input[type=text],input[type=password],textarea,select) {width: 300px;}

EXAMPLE HERE

This is an experimental technology that is in progress to be standardized in CSS Selectors Level 4 under the name :matches().