1

I want to apply background-color to a table cell which has an input[type=text]. Every cell in the table has a class .sapUiTableCell. I use this selector to select the cell, which has input[type=text]

td>.sapUiTableCell>input:not([type]){
   background-color : yellow !important;
}

The background is only applied to the input field and not the entire cell !

http://jsbin.com/tezite/1/edit

BoltClock
  • 630,065
  • 150
  • 1,295
  • 1,284
ikiw
  • 330
  • 1
  • 4
  • 13
  • 2
    because it's a child selector. unfortunately there's no parent selector in css. – T J Jul 10 '14 at 06:05
  • I'm confused. In your question, you say you're looking for inputs of type "text", but in your CSS you have a selector that finds inputs without a type attribute. So which one is it? Or are you depending on the fact that inputs lacking a type attribute default to text (which isn't really a good idea since browsers don't have very good support for attribute defaults)? – BoltClock Jul 10 '14 at 06:14
  • 1
    With css3 this is not possible (nor with css2). But the "parent-selector" has been [added to css4 spec](https://news.layervault.com/stories/25544-interesting--has-selector-added-to-the-css4-spec). Possible duplicate of http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector – MIdhun Krishna Jul 10 '14 at 06:16

2 Answers2

3

A selector formed with > always selects a child, by its definition. This is why it is called child selector.

There is (currently) no parent selector in CSS, i.e. a selector that would select an element on the basis of what it has as children. See Is there a CSS parent selector?

The practical conclusion is that normally you should set class attributes on the cells to distinguish them, unless you can select them on the basis of where they are nested in, rather than their content.

Community
  • 1
  • 1
Jukka K. Korpela
  • 178,198
  • 33
  • 241
  • 350
2

What you're using is a direct child selector.

The > combinator separates two selectors and matches only those elements matched by the second selector that are direct children of elements matched by the first.

Unfortunately there are no parent selectors in CSS as of now.

T J
  • 40,740
  • 11
  • 73
  • 131
  • Well there is a [working draft](http://dev.w3.org/csswg/selectors4/#relational), not that there's any browser support yet, but one can hope ;-) – steveax Jul 10 '14 at 06:37