Class in TR without one TD - html

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.

Answer 1

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/

Answer 2

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;
}

Answer 3

Like here : http://jsfiddle.net/dZYEM/10/
CSS:
tr:nth-child(3n) {
background: none !important;
}

Answer 4

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.