CSS descendant selector add style excluding child elements

My issue involves two divs each containing a table. When I apply the CSS class "table" to the first div, the second table in the div is impacted as well.

.tbl-generic th:nth-child(-n+2),td:nth-child(-n+2) { 
    background-color:red;
    width:25px;
} 

.tbl-generic th:nth-last-child(-n+3),td:nth-last-child(-n+3) { 
    background-color:red;
    width:25px;
}
<div>
  <table class="tbl-generic">
    <tr>
    <td style="width:55px;">TEST1</td>
    <td style="width:55px;">TEST2</td>
    <td>TEST3</td>
    <td>TEST4</td>
    <td>TEST5</td>
    <td>TEST6</td>
    <td>TEST7</td>
  </tr>
 </table>
</div>

<div>
 <table>
    <tr>
    <td style="width:55px;">A</td>
    <td style="width:55px;">B</td>
    <td>C</td>
    <td>D</td>
    <td>E</td>
    <td>F</td>
    <td>G</td>
  </tr>
 </table>
</div>

Visit this link for more information.

htmlcss

Answer №1

Don't forget to include the .tbl-generic in your CSS!

.tbl-generic th:nth-child(-n+2), .tbl-generic td:nth-child(-n+2) { 
    background-color:red;
    width:25px;
} 

.tbl-generic th:nth-last-child(-n+3), .tbl-generic td:nth-last-child(-n+3) { 
    background-color:red;
    width:25px;
}
<div>
  <table class="tbl-generic">
    <tr>
    <td style="width:55px;">TEST1</td>
    <td style="width:55px;">TEST2</td>
    <td>TEST3</td>
    <td>TEST4</td>
    <td>TEST5</td>
    <td>TEST6</td>
    <td>TEST7</td>
  </tr>
 </table>
</div>

<div>
 <table>
    <tr>
    <td style="width:55px;">A</td>
    <td style="width:55px;">B</td>
    <td>C</td>
    <td>D</td>
    <td>E</td>
    <td>F</td>
    <td>G</td>
  </tr>
 </table>
</div>

Answer №2

Your CSS code is causing this issue:

.tbl-generic th:nth-child(-n+2),
.tbl-generic td:nth-child(-n+2) { 
    background-color:red;
    width:25px;
} 

.tbl-generic th:nth-last-child(-n+3),
.tbl-generic td:nth-last-child(-n+3) { 
    background-color:red;
    width:25px;
}

To correct it, your code should look like this:

.tbl-generic th:nth-child(-n+2),
.tbl-generic td:nth-child(-n+2) { 
    background-color:red;
    width:25px;
} 

.tbl-generic th:nth-last-child(-n+3),
.tbl-generic td:nth-last-child(-n+3) { 
    background-color:red;
    width:25px;
}

If not fixed, all td's will have the same style applied.

View the updated FIDDLE

Answer №3

Applying CSS to all td elements except for those within the first div did the trick. Don't forget to double-check your changes!

.tbl-generic th:nth-child(-n+2),.tbl-generic td:nth-child(-n+2) { 
    background-color:red;
    width:25px;
} 

.tbl-generic th:nth-last-child(-n+3),.tbl-generic td:nth-last-child(-n+3) { 
    background-color:red;
    width:25px;
}
<div>
  <table class="tbl-generic">
    <tr>
    <td style="width:55px;">TEST1</td>
    <td style="width:55px;">TEST2</td>
    <td>TEST3</td>
    <td>TEST4</td>
    <td>TEST5</td>
    <td>TEST6</td>
    <td>TEST7</td>
  </tr>
 </table>
</div>

<div>
 <table>
    <tr>
    <td style="width:55px;">A</td>
    <td style="width:55px;">B</td>
    <td>C</td>
    <td>D</td>
    <td>E</td>
    <td>F</td>
    <td>G</td>
  </tr>
 </table>
</div>

Answer №4

Give this a shot

div:first-of-type .tbl-generic{

}

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

Ways to center text within a nested div in a parent div with table-cell styling

The issue I am facing involves a parent div with the CSS property display: table;. Nested inside is a child div with display: table-cell;. Despite applying text-align: center;, the text within the second div does not align to the center as expected. Here ...

htmlcssangularjs

What is the best way to send multiple values from the view to a method without using two-way binding?

https://i.sstatic.net/X4ivP.png When I change the dropdown value for the route type in my code, I need to pass both the gender value and the route type ID to my data retrieval method. Currently in my HTML file, I have only written a change event. I attem ...

htmlangulartypescript

Save the user input to a dedicated text file

I am working with a couple of select tags that generate an array. Previously, I was only logging the array to the console upon pressing the SUBMIT button, but now I want to save it to a separate text file. Here is my main.html code: <form method="POS ...

javascripthtml

CSS is not referred to as animation

Every time we hit a key, the dinosaur receives a jump class that should activate an animation. Unfortunately, the animation does not play. animation not functioning <!DOCTYPE html> <html lang="en"> <head> <meta c ...

css

Position the Close Button within the CSS Cookie Consent Popup in perfect alignment

Having trouble aligning the close X button in my cookie consent popup to the center? I added a margin-top to adjust it, but I'm looking for a better solution. <div class="alert cookiealert" > By using our website you agree to our C ...

htmlcsscookiesbootstrap-4cookieconsent

Enhance data validation in PHP

I love using Nicedit as a text editor because it allows me to easily add bold and italic formatting to my form fields. However, when I try to store this text in my database, Nicedit adds HTML tags for bold, italic, and other formatting styles. Is there a ...

javascriptjqueryhtmlnicedit

What steps should we take to ensure that the container beside the fixed left navigation bar is responsive?

Currently, I am working on creating a user interface that features a fixed navigation bar on the left hand side and a responsive content window. Here is what I have implemented so far: <div style="width: 15%; float: left; display: inline;"> <na ...

htmlcssangularbootstrapping

What are the best ways to create image animations on top of other images using CSS or JavaScript?

Imagine if the first image is in black and white, while the second one is colored. How can we make the black and white image change to color after a timeout period, with an animation similar to loading progress bars? Is this achievable using CSS or JavaScr ...

javascripthtmlcss

Press the toggle switch button to easily switch between two distinct stylesheets

With a looming exam at university, my web design professor has tasked us with creating a website. The unique challenge is to implement a style change by seamlessly switching between two different CSS stylesheets. My idea is to start with a black and white ...

javascriptcss

Route parameters do not function correctly with computed properties

I'm facing an issue with my getter function that stores all products. When I try to retrieve a single product dynamically based on this.$route.params.id, it doesn't return any value. The code works fine when I navigate to a specific product, but ...

javascripthtmlvue.jsvuejs2vue-router

The functionality for bold and italics does not seem to be functioning properly in either Firefox

Text formatted with <b></b> and <i></i> tags appears correctly on iPhone and Internet Explorer, but lacks formatting in Firefox or Chrome. I have included the .css files below. Additionally, I attempted to add i { font-style:italic ...

htmlcss

poor scrolling performance when transitioning focus between elements in the interface

Looking for some assistance? Check out this codepen. I'm currently working on a search bar widget that allows navigation from the input field to the search results, displayed as a series of divs. The navigation is controlled via jquery, where the foc ...

jqueryhtmlcss

Locate an original identifier using Selenium WebDriver

In search of a distinctive identifier for the "update profile picture button" on my Facebook account to utilize it in automation testing with Selenium WebDriver and Java. I attempted driver.findElement(By.className("_156p")).click();, but unfortunately, i ...

javacssxpathselenium-webdriver

Interactive pop-up window featuring a top section, main content, and bottom section

I have a situation where I've created a modal with sticky headers and footers, and the middle section scrolls based on the content. Everything looks great on Desktop, but when viewed on mobile or tablet devices, the footer is stretched and not fully ...

htmlcssmobilesassresponsive

Upon the page loading, only select a handful of checkboxes (JSF)

I am currently developing a web application using JSF 2.0 and I need to have checkboxes pre-selected when the page loads. <h:selectManyCheckbox value="#{UserRegistration.rightSelected}" id="myRight"> <f:selectItem itemValue="add" itemLabel="A ...

htmljsfjsf-2checkbox

Steps to establish the starting value as 'Concealed'

I stumbled upon this interesting example that demonstrates how to create expandable/collapsible text when clicked. My question is, how can I initially set the value to be hidden so that the paragraph starts off collapsed and expands only when clicked? He ...

javascripthtmlcss

Can you explain the concept of "cascading" within CSS?

Can someone kindly explain the specific definition of "Cascading" in Cascading Style Sheets (CSS)? I have heard conflicting perspectives on this topic, so I am seeking clarification here. Any examples to illustrate would be greatly appreciated. ...

cssterminologycss-cascade

What is the best way to create a seamless background transition for buttons on a mobile device?

Currently, I am working on my random quote generator project and I am trying to make it so that when the button is touched on a mobile device, the background color becomes semi-transparent. Below is the code I am using: #loadQuote { position: fixed; w ...

htmlcssfrontend

Developed a basic HTML form using PHP, however encountering issue where email is not being posted and instead opening a blank page

After creating HTML and PHP documents, I encountered an issue where upon submitting the form, I ended up with a blank page and didn't receive the expected email containing the form information. As someone relatively new to this, I would greatly apprec ...

phphtml

Ways to avoid overflow of dynamically added div element?

Currently, I am facing an issue while dynamically appending div elements with the .magnet class to my page. These elements end up overflowing the container boundaries and I am struggling to find a solution for this problem. If anyone could check out my j ...

javascriptjqueryhtmlcss