CODEWITHSUNDEEP
htmlcsscss-selectors
ikiw
ikiw

Reputation: 358

Css Selector > only selects the child rather than parent

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

Upvotes: 1

Views: 101

Answers (2)

T J
T J

Reputation: 43156

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.

Upvotes: 2

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201538

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.

Upvotes: 3

Related Questions