Class without a single TD in TR

<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/

Is there a way to apply styling to elements with class .here only when the child input has the readonly attribute without modifying the HTML? See the updated example here: jsfiddle.net/dZYEM/2/

The desired result is shown here: http://jsfiddle.net/dZYEM/3/

This should be achieved using only CSS, without using any additional style attributes.

Answer №1

CSS does not offer a direct way to achieve this task since it lacks a has or contains selector.

However, you can easily accomplish this using just a single line of jQuery code, which is highly efficient.

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

Feel free to test it out on this interactive jsFiddle link - http://jsfiddle.net/T7hnR/2/

Answer №2

There are two options available to you

Option number one: If the tr is last, then apply this CSS

tr:last-child{
background:none;
}

Option number two: If the tr number is 3, then use this CSS.

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

Answer №4

To modify the content inside a specific element, one can utilize CSS2 selectors

E[foo="warning"] This selector matches any E element with an attribute "foo" value that is exactly "warning".

However, it is important to note that selecting the parent element directly is not possible with CSS2 or CSS3 alone. In such cases, one would need to resort to solutions involving JavaScript or jQuery.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for preventing my text from disappearing off the screen when I resize it

Hello there and thanks in advance. I've recently delved into the world of HTML and CSS and I'm currently in the process of building my own website. I've encountered an issue with a div container where I'm utilizing Bootstrap elements. T ...

Are there any other options available in JavaScript to replace the .unload() function?

I have a click event attached to multiple buttons on my page, each loading a different .php file into the same div. The issue arises when the time to load increases after several clicks. $('#start').click(function() { $('#mainbody&apos ...

Struggling to connect HTML elements with AngularJS and TinyMCE?

My objective is to edit text using tinymce, persist it in a database, and display it within a div by incorporating angularJS for the same styling and formatting. I am utilizing tinymce 3.5.8 with an angularUI directive. I have successfully saved the wysiw ...

Endless scrolling feature malfunctioning

On my profile_page.php, the default setting is to display 10 posts (10 rows from the database) for the user. If a user has more than 10 posts, and scrolls to the bottom of the page, the div should expand to reveal the remaining posts (maximum of 10). For e ...

Issues with interpreting PHP within HTML documents

I'm having trouble using PHP on my HTML page. I've added AddType application/x-httpd-php .html to the .htaccess file as recommended, but when I try to access the page in a browser, a dialog box pops up asking if I want to save the file or open it ...

Unable to trigger a click on the submit button using JavaScript

I'm encountering difficulties in triggering a click using JavaScript on a Mailchimp pop-up subscribe form and I require your assistance. <!-- Title & Description - Holds HTML from CK editor --> <div class="content__titleDescripti ...

What is the method for applying background color to text within a textbox?

I am struggling to phrase this question properly and unable to find the solutions I need on Google. When searching, it only provides information on how to add an entire background color to a textbox, which is not what I am looking for. What I aim to achiev ...

Achieve Perfect Alignment of Text Inside a Floating Div

Currently, I have a div aligned to the right inside another container. The text (date/time) within this right-aligned div needs to be vertically centered without using top padding. Whenever I apply top padding, it shifts my div downwards and disrupts its ...

Issues with unresponsive links (HTML5/CSS)

As a beginner, I've encountered an issue where my previously working links are no longer functioning. Can anyone help identify what could be going wrong? Below is the HTML code: <!doctype html> <html> <head> <meta charset="UTF-8 ...

Is it possible to loop through a subset of a collection using *ngFor?

Is it possible to iterate through a specific range of elements in a collection using *ngFor? For instance, I have a group of checkboxes with their form control name and label specified as follows: [{id: 'c1', label: 'C1'}, ...] Assum ...

Steps to activate a single button within a deactivated fieldset

Is there a way to deactivate all elements within a Fieldset, while keeping certain buttons active? Check out this demo. <fieldset ng-disabled="true"> <legend>Personalia:</legend> Name: <input type="text"><br> Em ...

ERB failing to interpret Ruby script

Hello, my index.html.erb file looks like this: <h1>Bookmarks</h1> t <% @books.each do |b| %> <div class="book"> e <div class="row"> s <div class="col-md-1"> t <p class="rank-this ...

Implementing AngularJS drag and drop functionality in a custom directive

I am in search of an example that demonstrates similar functionality to the HTML5 File API using Angular-js. While researching directives for Angular 1.0.4, I found outdated examples that heavily rely on DOM manipulation. Here is a snippet of the pure Ja ...

javascriptif the number is a whole number and evenly divisible

I am currently developing a script that tracks the distance traveled by some dogs in meters. It is basically just a gif running in a loop. What I want to achieve now is to display an image every 50 meters for a duration of 3 seconds. Here's my attempt ...

The Dropdown Menu is displaying correctly in Chrome, but is being obscured by an image in Safari

While the Nav dropdown menu functions correctly in Chrome, an issue arises in Safari where the image covers the rest of the menu. This discrepancy between browsers is puzzling. Why does this problem only occur in Safari when it displays properly in Chrome? ...

Determine the number of input files in HTML5 when there is a change

I am working on a project that requires using the HTML5 File API to determine the number of files selected in an input file element and then displaying this count in another element. Here is the HTML code: <div class="form-row"> <label>Ma ...

numerous sections within a solitary webpage

I need to implement multiple tabs on a single page, how do I modify the code to make this possible? Take a look at the codepen for reference. Here is the jquery code I have written so far: var tabs = $(".tabContainer ul li a"); $(".tabConten ...

How can I resize the border to match the size of the text inside it?

Check out the following image to see how it appears:https://i.sstatic.net/RkMqI.png Here is an example code snippet of a message: .allMsg { width: 100%; } .self { border-radius: 1rem; background-color: #28a745; text-align: right; padding-lef ...

issue with jQuery not properly selecting options based on text

I have three select elements in my code, each containing 3 or 4 options. An "Apply All" button is placed on the first file row. When a user selects a sheet name on the first file and clicks the Apply All button, it should automatically select the same she ...

Guide to retrieving the primary key auto-increment value for the ID field in an SQL record using PHP Scripting

I am currently working on a multi-page web survey form and I have a PHP script called process.php that handles my responses on www.buythosecars.com. This script stores the responses in a MySQL table and then redirects the user to www.buythosecars.com/surve ...