How to set a CSS settings only to the td of an external table but not to the internal table?


Tags: html,css,css3,layout,xhtml

Problem :

I am working on a legacy web page that use a table layout (that unfortunately I can't replace with a new pure HTML\CSS layout) and I have the following problem.

I have a situation like this:

<table class="externalTable">
    <tr id="firstRow">
        <td>
            <div>
                <table id="tablistOn">
                    <!-- SOME ROWS ARE SHOWED -->
                </table>
            </div>
        </td>

        <td>SECOND td</td>
        <td>THIRD td</td>
    </tr>
</table>

I need to applied a bottom-border property only to the #firstRow row and I do in this way:

.externalTable #firstRow td, .externalTable #firstRow th {
    border-top: 1px solid red;
    border-bottom: 1px solid red;
}

but doing in this way the problem is that this style is applied also at all the tows inside the internal table rows (the one having id="tablistOn").

I think that I can override it defining a new style for this table but I am asking if I can apply my style only to the external table selecting only the class="externalTable" table but not its inner table id="tablistOn".

How can I do it in some way?

Tnx



Solution :

You're using descendant selectors, which will match all children within an element. What you need are child selectors - > - which will only select direct descendants of an element.

.externalTable #firstRow>td, .externalTable #firstRow>th {
    border-top:1px solid red;
    border-bottom:1px solid red;
}

    CSS Howto..

    how to animate .jpg image with CSS?

    How to make fonts display on web cross-platform?

    How to alternate background colour on DIV rows? (Jquery and/or CSS)

    How to set a CSS selector for links ( a Tag ) for a Class

    How i can force my div to display in block?

    Google font - how to specific font-family If they have the same name?

    How can I float divs so that they expand past their container?

    How do I center my search form within a div?

    How to add animated gif to an image sprite?

    How to create text block over the images with css and make it responsive

    How to make to border-bottom line longer with CSS

    how to get the site to not collapse with css

    How would I go about applying some sort of dynamic range counter to jQuery and CSS?

    How can I get my divs to process separately?

    How do you set JavaFX TabPane CSS in code?

    how to make 2 fixed-width sidebar div and 1 flexible-width main div?

    How to set a menu as selected while selecting its subchild

    How to remove a CSS class from all same level table rows When a Row is Selected?

    How can I add a css property to the first div with a specific class name?

    Div inside how to call class in css?

    jQuery How to select the only child of a
  • inside a class
  • How to justify 4 divs in one row [duplicate]

    How is `outline: inherit 0` interpreted?

    CSS: How to set several div's in one line with 100% width?

    How can I make the menu to wrap when I resize my browser?

    How to deal with image references in CSS in a Rails 3.1 app

    How to customize ionic style components (lists and tabs with different shapes)

    How to achieve following style for horizontal rule with css

    Bootstrap CSS - How do I keep the search form inline with other navbar elements?

    How to change css property using jquery with this code