How to edit background color a TD inside a div and an ID-CodePudding

Hi i have the following code and i am trying to Color the background of the TDs inside this little Tab i created.

<body>
  <nav >
    <ul>
      <li>
        <input type="radio" name="tabs"  id="tab2">
        <label for="tab1">Shutdown</label>
        <div >

I tried doing like this on the style sheet:

.nav_tabs #tab2 .content td
  {
  background: lightcyan;
  }

I dont really understand what i am doing wrong but it is not working, i tried different things but nothing.

I cant post the content inside the article but it is mostly tables:

<style>
    *
    {
        margin:0;
        padding: 0;
    }

    body    
    {
        font-family: Arial, Helvetica, sans-serif;
    }
    .nav_tabs
    {
        width: 600px;
        height: 400px;
        margin 100px auto;
        background-color: #fff;
        position: relative;

    }

    .nav_tabs ul
    {
        list-style: none;
    }
    .nav_tabs ul li
    {
        float: left;
    }
    .nav_tabs label
    {
        width: 100px;
        padding: 25px;
        background-color: #363b48;
        display:block;
        color: #fff;
        cursor: pointer;
        text-align: center;
    }
    .rd_tabs:checked ~ label
    {
        background-color: #e54e43;
    }

    .rd_tabs
    {
        display: none;
    }
    .content
    {
        border-top: 5px solid #e54e43;
        background-color: #fff;
        display: none;
        position: absolute;
        height: 320px;
        width: 600px;
        left: 0;
    }
    .content article
    {
        padding 10px;
    }
    .rd_tabs:checked ~ .content
    {
        display: block;
    }
    .nav_tabs .content td
    {
        background: lightcyan;
    }

</style>    






<body>
    <nav >
        <ul>
            <li>
                <input type="radio" name="tabs"  id="tab1" 
                checked>
                <label for="tab1">tab1</label>
                <div >
                        <article>                    
                    </article>
    </li>
    <li>
                <input type="radio" name="tabs"  id="tab2">
                <label for="tab2">SHUTDOWN (MINIMUM CONFIGURATION)</label>
                <div >
                    <article>                    
                    </article>
    </div>
            </li>
            <li>
                <input type="radio" name="tabs"  id="tab3">
                <label for="tab3">Tab3</label>
                <div >
                    <article>
                    
                    </article>
                </div>
            </li>         
        </ul>

    </nav>

</body>

CodePudding user response：

try remove #tab2 in your css

.nav_tabs .content td
{
    background: lightcyan;
}

i dont see in your html code something like that id='tab2' between your.nav_tabs and .content . so probably that's why it doesnt work now

update
if you need change the color of tab2 for example
so you have to add id='tab2' to the <li> element
but it shouldn't be duplicate the id in inputs

CodePudding user response：

Did you import the .css file into this file?