Prevent CSS from affecting child tables

Here is my CSS and HTML setup:

.comTable {
    width: 95%;
    cellpadding: 2px;
    margin: auto; 
    border-collapse: collapse;
}

.comTable td {
    text-align: left;         
}

.comTable td:first-child {
    text-align: right;            
    width: 25%;
}
<table id="tableMain" class="comTable"> 
    <tr>
        <td>
            Some texts 1                
        </td>
        <td>
            <table id="table2">
                <tr>
                    <td>
                        Some more texts
                    </td>
                    <td>

                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td>
            Some texts 2                
        </td>
        <td>
            <table id="table3">
                <tr>
                    <td>
                        Some more texts...
                    </td>
                    <td>

                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

The issue I am facing is that the .comTable CSS class is being applied to table2 and table3, causing their first column to also be set to 25%. How can I ensure that .comTable td:first-child only affects tableMain? Ideally, I would like to avoid applying a class to each first td in tableMain due to the large number of rows it contains.

csscascade

Answer №1

One way to accomplish this is by utilizing the following CSS code:

.tableClass > tr > td:first-child {
    text-align: right;
    width: 25%;
}

This code snippet will help you achieve the intended outcome. Using > ensures that only direct children are targeted, and not nested ones.

Answer №2

To ensure proper CSS styling, always use > instead of spaces: for example, use .comTable > tr > td or .comTable > * > td.

Answer №3

In addition to Solomon's response:

You have the option to combine the > (child selector) with * (selector for all elements). This allows you to target td elements within both tbody and thead.

.comTable > * > * > td

Assuming the HTML is structured as follows:

<table id="tableMain" class="comTable"> 
    <tbody>
        <tr>
            <td> ...

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

Varied approaches to managing responsive layouts

I am encountering an issue with the responsive design of a website I am currently developing. Scenario: The website features 3 different layouts for Desktop, Tablet, and mobile devices. These layouts consist of similar components with slight CSS adjustmen ...

javascriptjqueryhtmlcss

The WordPress GD Star rating plugin is failing to load on the webpage

I am having trouble getting the GD star rating plugin to load on my website. I followed the correct installation and configuration steps, but the plugin still won't show up on the page. I have attempted various solutions without success. Can anyone s ...

csswordpress

The stylesheet's URL reference to the image is not functioning properly

I'm attempting to showcase images inside a table cell using CSS. Here's what I currently have: HTML: <td class="activity-status status_not_started">Not Started</td> CSS: td.activity-status { font: 0/0 a !important; color: transpar ...

css

Boxes rest gently against each other

Hello everyone! I'm currently working on a website for one of my college projects, and I could really use some assistance. I seem to have two boxes touching each other when I actually want a small gap between them. Any help or suggestions would be gre ...

htmlcss

Are the buttons appearing within a pop-up display?

I am having an issue with my Javascript popup buttons. Whenever the popup appears, the buttons that come after the one clicked appear on top of the popup container, and the previous buttons appear behind it. How can I ensure that the popup container displa ...

javascripthtmlcssbuttonpopup

CSS and the best practices for button styling in a navigation bar

My friend and I are facing a CSS issue while working on a webpage together. We both have limited experience with HTML and CSS. Here's the code snippet in question: .nav li { margin: auto; display: inline-block; color: white; padding: 10px; font ...

htmlcsshtml-listsnav

Automatically switch to the designated tab depending on the URL

Is it possible to automatically activate a specific tab based on the URL structure if my tabs are configured in this way? I am looking for a solution where a link on www.example1.com/notabs.html will redirect to www.example2.com/tabs.html This particular ...

javascriptjqueryhtmlcss

I am interested in incorporating a vertical scrollbar into a gridview in ASP.NET

I've successfully bound data to a grid view in my ASP.NET application. I've implemented pagination, but instead of that, I'd like to incorporate a scroll bar to prevent lengthy paging. Below is the code for my grid view: <div class="box ...

c#htmlcssasp.net

Arrangement within a span

I've been refreshing my HTML/CSS skills in preparation for a new job opportunity. The last time I dabbled in HTML was way back in 1999... Needless to say, I've fallen quite behind. As a big fan of the "Space Trader" game on Palm OS, I've tak ...

htmlcssweb

What is the best way to customize media queries in a child theme?

Is it possible to override a media query in my Wordpress child theme? Currently, the media query is set at max-width: 1024px, but I would like it to be triggered at a smaller size, maybe around 700px. The issue arises when attempting to create a new media ...

csswordpresswordpress-themingmedia-queries

Is there a foolproof method to verify if a user truly has visibility of a div element?

When I search online, most solutions only consider the viewport and/or the first parent container that is scrollable when trying to determine if a div is visible. However, I am wondering if there is a foolproof method to check if a div is truly visible t ...

htmlcssdomviewportscrollable

Video with dynamic sizing doesn't adapt properly

I successfully achieved my main goal, which was to have a background video at the top of my page. However, I am facing an issue with making the video responsive. Currently, as I decrease the screen size, the video shrinks in both width and height rather th ...

htmlcsstwitter-bootstrapvideoresponsive-design

Maintaining Aspect Ratio and Adding Letterboxes with Next.js Image

In my Next.js app, there is a section dedicated to displaying selected photos from a gallery. It's crucial for this area to maintain a fixed size of 566px*425px as users navigate through images or when a photo is loading. While the layout is responsiv ...

cssnext.js

Tips for maintaining image dimensions on the screen using html and css?

Hello everyone! I am excited to be diving into the world of html and css, as I have a course lined up for next month. However, I currently have a project that I need to tackle on my own. One issue I'm facing is keeping the products within the screen s ...

javascripthtmlcssangular

CSS: Contain text within a div to dynamically adjust the div's length based on the text content

Check out this code snippet: View the Fiddle <div id="main" style="border:1px solid red;"> <div id="child" style="background-color:#68c5e7; width:170px; margin:0 auto; font-size:30px; background-image:url(https://www.google.by/logos/2012/javelin ...

htmlcssmarginpadding

Exploring the grid system within bootstrap

As I venture into the world of web design, I have chosen to explore Angular. However, I find myself grappling with certain concepts in bootstrap, unsure of what is the correct approach. Being a novice in this field, I appreciate your patience as I seek gui ...

htmlcssresponsive-designfrontendbootstrap-5

Shaky parallax movement

I recently created a website with a parallax effect, but I'm experiencing some performance issues with jittery movement. The page uses CSS3 transform scale to zoom in and out, and automatically resizes on page resize with JavaScript/jQuery. For the ...

javascriptjquerycss

Can you please share the updated method for defining the traditional `inline-block` display setting?

Recently, CSS has undergone a change where the display property is now split into an inner display and outer display. With the legacy value of display: inline-block, it raises the question of what the newer equivalent should be. One might assume that the ...

css

Leveraging jQuery.css for retrieving values in Internet Explorer

I need to assign a variable to the value of the border-color property of my div errorChartColorError = $('.col__item.error').css('border-color'); Although this code works fine in Chrome, Internet Explorer 11 returns it as undefined W ...

jquerycssinternet-explorerinternet-explorer-11

How can we ensure that the borders of a text field automatically adjust to fit the dimensions of the text field using CSS?

I've encountered an issue with the borders of text fields while working on a project involving CSS/HTML. The problem is that in the browser, the borders appear shorter than the text fields. Initially, I attempted to adjust the border size to match th ...

htmlcss