Class in TR without one TD

Question

<table> <tr class="here"><td><input type="text" readonly=readonly></td></tr> <tr class="here"><td><input type="text" readonly=readonly></td></tr> <tr class="here"><td><input type="text" ></td></tr> </table> td { padding: 15px; margin: 10px; } .here { background-color: red; }

http://jsfiddle.net/dZYEM/

How can i modify class .here that this working where child input has attribute readonly? I dont want modify html.

EDIT:

now i have: jsfiddle.net/dZYEM/2/

i would like receive: http://jsfiddle.net/dZYEM/3/

but without use style. I want receive this only with css.

What are you trying to achieve? Your question is very clear. Can you rephrase it? — Gaz Winter
– Gaz Winter, Commented Jun 22, 2012 at 9:08

Malitta N · Accepted Answer · 2012-06-22 09:25:56Z

There is no pure CSS way to do this as CSS does not have a has or contains selector.

But this can be done using one line of jQuery. And it's really fast.

$("tr.here:has(input[readonly='readonly'])").css('background', 'red');

Here is a working jsFiddle to try it - http://jsfiddle.net/T7hnR/2/

+1, shorter version $(".here:has([readonly])").css('background', 'red');

Rohit Azad Malik · Accepted Answer · 2012-06-22 09:46:43Z

Hey you have two option

first is if your tr is last than apply this css

tr:last-child{ background:none; }

Second is if your tr number is 3 than used to it.

tr:nth-of-type(3){ background:none; }

Ahsan Rathod · Accepted Answer · 2012-06-22 09:17:48Z

0

Like here : http://jsfiddle.net/dZYEM/10/

CSS:

tr:nth-child(3n) { background: none !important; }

answered Jun 22, 2012 at 9:17

Ahsan Rathod

5,5252 gold badges23 silver badges26 bronze badges

1 Comment

Roy Grendester Over a year ago

this is ok for this example, but these TR is more and this is added with ajax

ericosg · Accepted Answer · 2012-06-22 09:30:15Z

One could edit the inner element by makiung use of CSS2 selectors

E[foo="warning"] Matches any E element whose "foo" attribute value is exactly equal to "warning".

But this will not allow you to select the outer parent element. Under either CSS2 or CSS3 this does not exist, and you would have to do it with the solutions provided with JavaScript/jQuery.

thanks, indeed it's not the required result. After some research, it seems not to be able to be done with CSS alone. (edited).

Collectives™ on Stack Overflow

Class in TR without one TD

4 Answers 4

1 Comment

Comments

1 Comment

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

1 Comment

1 Comment

Related