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">
                <table id="tablistOn">
                    <!-- SOME ROWS ARE SHOWED -->

        <td>SECOND td</td>
        <td>THIRD td</td>

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?


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

    CSS - How to match class (one dynamic and one static) between two elements

    jQuery .animate() sets display:none, how to avoid?

    How to change this FontAwesome to image in Css?

    How to test .css file for syntax errors?

    How to style a button's font in CSS?

    Visual studio 2013 crash when editing a css file. How do I troubleshoot?

    How to apply effects to a unicode character in CSS? [closed]

    Some misunderstanding how to use bootstrap and css

    How to change image size when nested in


    How to keep “text-decoration: underline” from breaking while applying some positioning to the child ?

    How to use CSS to change icon color

    How to build this layout with CSS?

    How to create e-commerce website [closed]

    How do I center 2 divs in HTML Bootstrap?

    How to assign a:hover, a:visited, etc. using the style attribute only [duplicate]

    How to overlay shadow with bootstrap?

    How to point to a specific icon in an icon set?

    How to css target “Tab” state of the input?

    how to change CSS priority (don't use !important)

    How to shield a HTML tag from CSS?

    Hide / show element if text is / isn't to long in jQuery

    How to transform simple CSS box

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

    How to prevent CSS declaration dropped errors cross browser?

    Showing an hidden element with an opacity-animation

    How to show a notification bar on Top after n seconds with transition from top to down?

    How to get similar effect on menu

    How can I show part of an element, and toggle to all of the element on click?

    How i can make it wiht css3?

    CSS how to align vertically center div floating elements of menu?