0

I am currently often using in my CSS things like

table.form > tbody > tr > td > input[type=text], 
table.form > tbody > tr > td > input[type=password], 
table.form > tbody > tr > td > textarea , 
table.form > tbody > tr > td > select {width: 300px;}

Is this a correct way to do it with respect to minimal CSS output size? Is there any way to group those elements without having to reiterate their entire parent structure, something along the lines of 

table.form > tbody > tr > td > 
(input[type=text],input[type=password],textarea,select) {width: 300px;}

?

Hashem Qolami
  • 97,268
  • 26
  • 150
  • 164
user1111929
  • 6,050
  • 9
  • 43
  • 73
  • 1
    Only using e.g. LESS or SASS - unless the styling is the same, in which case use a shared class – SW4 Aug 13 '14 at 11:58
  • Like @SW4 said, you can make writing this much easier with sass or less. But you could also aks your self, if you have to be so specific. When you can write a style for a page where form elements will mostly look the same you may just simple style "widgets" like `input[type=text], input[type=password] { ... }` without looking at the parent elements. Of course, sometimes you need to be specific, for example when you override framework code etc. – Nico O Aug 13 '14 at 12:01
  • You could look into SASS (just google SASS and you'll get it). I know that you can use 'variables' and nest CSS with that. You could nest your input types within curly braces after declaring your table.form >.... Just a thought :-) – John T Aug 13 '14 at 12:10

1 Answers1

3

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().

Hashem Qolami
  • 97,268
  • 26
  • 150
  • 164
  • Using `:any()` in its current state is pointless due to the prefixes as you end up having to duplicate the rulesets anyway. See http://stackoverflow.com/questions/10753174/css3-combining-selectors-with-or-instead-of-and/10753216#10753216 and http://stackoverflow.com/questions/800779/why-cant-you-group-descendants-in-a-css-selector/11786102#11786102 I strongly recommend waiting until browsers implement `:matches()`. – BoltClock Aug 13 '14 at 15:06