What is the best way to target a nested selector in CSS?

Question

What is the best way to target a nested selector in CSS?

To ensure the entire cell is filled when a modal is present, the padding of the table should be zero. See image https://i.sstatic.net/Qq2T4.png

How can I target the specific selector nested within the table under different classes and IDs?

I've experimented with various combinations like: #tabletu .modal #myBtn2 td, but none have successfully removed the padding. For instance:

// Get the modal
var modal = document.getElementById("myModal");

// Get the button that opens the modal
var btn = document.getElementById("myBtn2");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal 
btn.onclick = function() {
  modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

#tabletu .modal {
  padding: 0px;
}

#tabletu {
  background-color: transparent;
  border-collapse: collapse;
  width: 100%;
}

#tabletu td,
th {
  border: 1px solid #000000;
  padding: 8px;
}

#tabletu th {
  padding: 8px;
  text-align: left;
  border: 1px solid #000000;
  background-color: rgba(0, 110, 167, 1);
  color: white;
}


/* The Modal (background) */

.modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  padding-top: 100px;
  /* Location of the box */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/ opacity */
}


/* Modal Content */

.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

.modal td {
  padding: 0px;
}


/* The Close Button */

.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.notebook {
  border-collapse: collapse;
  width: 70%;
}

.notebook td:hover {
  background-color: #ddd;
}

.notebook td,
.notebook th {
  border: 1px solid #ddd;
  padding: 0px;
}

.block {
  display: block;
  width: 100%;
  border: none;
  background-color: rgba(0, 166, 214, 1);
  padding: 14px 28px;
  font-size: 16px;
  cursor: pointer;
  text-align: center;
  box-sizing: border-box;
}

.block:hover {
  background-color: rgba(0, 166, 214, 0.78);
  color: black;
}

.month {
  text-align: center;
}

#category {
  padding: 8px;
}

<h2>Experiment Notebook</h2>
<center>
  <table id="tabletu" class="notebook">
    <tr id="category">
      <th></th>
      <th id="category">Test1</th>
      <th>Test2</th>
      <th>Other</th>
    </tr>
    <tr>
      <td rowspan=2 class="month">April</td>
      <td>
        <!-- Trigger/Open The Modal -->
        <button id="myBtn2" class="block">Open Modal</button>

        <!-- The Modal -->
        <div id="myModal" class="modal">

          <!-- Modal content -->
          <div class="modal-content">
            <span class="close">&times;</span>
            <p>Some text in the Modal..</p>
          </div>

        </div>
      </td>
      <td><button id="myBtn2" class="block">Open Modal</button></td>
      <td>Germany</td>
    </tr>
    <tr>

      <td>Berglunds snabbköp</td>
      <td>Christina Berglund</td>
      <td>Sweden</td>
    </tr>
    <tr>
      <td></td>
      <td>Centro comercial Moctezuma</td>
      <td>Francisco Chang</td>
      <td>Mexico</td>
    </tr>
    <tr>
      <td></td>
      <td>Ernst Handel</td>
      <td>Roland Mendel</td>
      <td>Austria</td>
    </tr>
    <tr>
      <td></td>
      <td>Island Trading</td>
      <td>Helen Bennett</td>
      <td>UK</td>
    </tr>
    <tr>
      <td></td>
      <td>Königlich Essen</td>
      <td>Philip Cramer</td>
      <td>Germany</td>
    </tr>
    <tr>
      <td></td>
      <td>Laughing Bacchus Winecellars</td>
      <td>Yoshi Tannamuri</td>
      <td>Canada</td>
    </tr>
    <tr>
      <td></td>
      <td>Magazzini Alimentari Riuniti</td>
      <td>Giovanni Rovelli</td>
      <td>Italy</td>
    </tr>
    <tr>
      <td></td>
      <td>North/South</td>
      <td>Simon Crowther</td>
      <td>UK</td>
    </tr>
    <tr>
      <td></td>
      <td>Paris spécialités</td>
      <td>Marie Bertrand</td>
      <td>France</td>
    </tr>
  </table>

</center>

Thanks to A. Meshu for assistance so far, but there's still a small white line appearing below the modal. https://i.sstatic.net/3wBFs.png

html css html-table css-selectors padding

Answer 1

Answer №1

To address this issue, you can apply a specific class to all the <td> elements containing buttons and then override their default styling using the !important rule. Here, I have created a class called modalTD:

.modalTD {padding: 0!important;} // removes horizontal padding
.modalTD button {height: 65px!important;} // adjusts button height to fill the entire cell

The corresponding HTML code would look like this:

.
.
.
<td class="modalTD"><!-- Trigger/Open The Modal -->
  <button id="myBtn2" class="block">Open Modal</button>
.
.
.

As a side note, in the future, the :has pseudo-class may simplify tasks like these, although it is not widely supported at the moment.

EDIT

Alternatively, a more efficient solution that affects the entire row (which may not be visually problematic) is:

#tabletu tr:nth-of-type(2) td {padding: 0;}

Answer 2

To address this issue, you can apply a specific class to all the <td> elements containing buttons and then override their default styling using the !important rule. Here, I have created a class called modalTD:

.modalTD {padding: 0!important;} // removes horizontal padding
.modalTD button {height: 65px!important;} // adjusts button height to fill the entire cell

The corresponding HTML code would look like this:

.
.
.
<td class="modalTD"><!-- Trigger/Open The Modal -->
  <button id="myBtn2" class="block">Open Modal</button>
.
.
.

As a side note, in the future, the :has pseudo-class may simplify tasks like these, although it is not widely supported at the moment.

EDIT

Alternatively, a more efficient solution that affects the entire row (which may not be visually problematic) is:

#tabletu tr:nth-of-type(2) td {padding: 0;}

Answer 3

Answer №2

Upon clicking the modal open, a modal-open class will be added to the cell, which applies 0px padding. When closing the modal, the class is removed, thus removing the padding as well.

        #tabletu {
            background-color: transparent;
            border-collapse: collapse;
            width:100%;
        }

        #tabletu td, th {
            border: 1px solid #000000;
            padding: 8px;
        }

        #tabletu th {
            padding: 8px;
            text-align: left;
            border: 1px solid #000000;  
            background-color: rgba(0,110,167,1);
            color: white;
        }
        /* The Modal (background) */
        .modal {
            display: none; /* Hidden by default */
            position: fixed; /* Stay in place */
            z-index: 1; /* Sit on top */
            padding-top: 100px; /* Location of the box */
            left: 0;
            top: 0;
            width: 100%; /* Full width */
            height: 100%; /* Full height */
            overflow: auto; /* Enable scroll if needed */
            background-color: rgb(0,0,0); /* Fallback color */
            background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
        }

        .btn-cell {
          padding: 8px;
        }
        .btn-cell.modal-open {
          padding: 0px!important;
        }
        /* Modal Content */
        .modal-content {
            background-color: #fefefe;
            margin: auto;
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
        }


        .modal td {
            padding:0px;
        }
        /* The Close Button */
        .close {
            color: #aaaaaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }

        .close:hover,
        .close:focus {
            color: #000;
            text-decoration: none;
            cursor: pointer;
        }

        .notebook {  
            border-collapse: collapse;
            width:70%;}
        .notebook td:hover {background-color: #ddd;}
        .notebook td, .notebook th {
            border: 1px solid #ddd;
            padding: 0px;
        }
        .block {
            display: block;
            width: 100%;
            border: none;
            background-color: rgba(0, 166, 214, 1);
            padding: 14px 28px;
            font-size: 16px;
            cursor: pointer;
            text-align: center;
            box-sizing: border-box;
        }

        .block:hover {
            background-color: rgba(0, 166, 214, 0.78);
            color: black;
        }
        .month {
            text-align: center;
        }        
        #category {
            padding:8px;
        }
    </style>
</head>
<body>

    <h2>Experiment Notebook</h2>
    <center>
        <table id="tabletu" class="notebook">
            <tr id="category">
                <th ></th>
                <th id="category">Test1</th>
                <th>Test2</th>
                <th>Other</th>
            </tr>
            <tr>
                <td rowspan=2 class="month">April</td>
                <td class='btn-cell'><!-- Trigger/Open The Modal -->
                    <button id="myBtn2" class="block ">Open Modal</button>

                    <!-- The Modal -->
                    <div id="myModal" class="modal">

                        <!-- Modal content -->
                        <div class="modal-content">
                            <span class="close">&times;</span>
                            <p>Some text in the Modal..</p>
                        </div>

                    </div>
                </td>
                <td class='btn-cell'><button id="myBtn2" class="block ">Open Modal</button></td>
                <td>Germany</td>
            </tr>
            <tr>

                <td>Berglunds snabbköp</td>
                <td>Christina Berglund</td>
                <td>Sweden</td>
            </tr>
            <tr>
                <td></td>
                <td>Centro comercial Moctezuma</td>
                <td>Francisco Chang</td>
                <td>Mexico</td>
            </tr>   
            ...
            
        </table>

    </center>



    <script>
        // Get the modal
        var modal = document.getElementById("myModal");

        // Get the button that opens the modal
        var btn = document.getElementById("myBtn2");

        // Get the <span> element that closes the modal
        var span = document.getElementsByClassName("close")[0];

        // When the user clicks the button, open the modal 
        btn.onclick = function() {
            modal.style.display = "block";
            togglePadding(true)
        }

        // When the user clicks on <span> (x), close the modal
        span.onclick = function() {
            modal.style.display = "none";
            togglePadding()
        }

        // When the user clicks anywhere outside of the modal, close it
        window.onclick = function(event) {
            if (event.target == modal) {
                modal.style.display = "none";
                togglePadding()
            }
        }

        var togglePadding = function(add) {
          var buttonCells = document.getElementsByClassName('btn-cell')
            for (var i = 0; i < buttonCells.length; i++) {
              if (add) {
                buttonCells[i].classList.add('modal-open')
              }
              else {
                buttonCells[i].classList.remove('modal-open')
              }
            }
        }

    </script>

Answer 4

Upon clicking the modal open, a modal-open class will be added to the cell, which applies 0px padding. When closing the modal, the class is removed, thus removing the padding as well.

        #tabletu {
            background-color: transparent;
            border-collapse: collapse;
            width:100%;
        }

        #tabletu td, th {
            border: 1px solid #000000;
            padding: 8px;
        }

        #tabletu th {
            padding: 8px;
            text-align: left;
            border: 1px solid #000000;  
            background-color: rgba(0,110,167,1);
            color: white;
        }
        /* The Modal (background) */
        .modal {
            display: none; /* Hidden by default */
            position: fixed; /* Stay in place */
            z-index: 1; /* Sit on top */
            padding-top: 100px; /* Location of the box */
            left: 0;
            top: 0;
            width: 100%; /* Full width */
            height: 100%; /* Full height */
            overflow: auto; /* Enable scroll if needed */
            background-color: rgb(0,0,0); /* Fallback color */
            background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
        }

        .btn-cell {
          padding: 8px;
        }
        .btn-cell.modal-open {
          padding: 0px!important;
        }
        /* Modal Content */
        .modal-content {
            background-color: #fefefe;
            margin: auto;
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
        }


        .modal td {
            padding:0px;
        }
        /* The Close Button */
        .close {
            color: #aaaaaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }

        .close:hover,
        .close:focus {
            color: #000;
            text-decoration: none;
            cursor: pointer;
        }

        .notebook {  
            border-collapse: collapse;
            width:70%;}
        .notebook td:hover {background-color: #ddd;}
        .notebook td, .notebook th {
            border: 1px solid #ddd;
            padding: 0px;
        }
        .block {
            display: block;
            width: 100%;
            border: none;
            background-color: rgba(0, 166, 214, 1);
            padding: 14px 28px;
            font-size: 16px;
            cursor: pointer;
            text-align: center;
            box-sizing: border-box;
        }

        .block:hover {
            background-color: rgba(0, 166, 214, 0.78);
            color: black;
        }
        .month {
            text-align: center;
        }        
        #category {
            padding:8px;
        }
    </style>
</head>
<body>

    <h2>Experiment Notebook</h2>
    <center>
        <table id="tabletu" class="notebook">
            <tr id="category">
                <th ></th>
                <th id="category">Test1</th>
                <th>Test2</th>
                <th>Other</th>
            </tr>
            <tr>
                <td rowspan=2 class="month">April</td>
                <td class='btn-cell'><!-- Trigger/Open The Modal -->
                    <button id="myBtn2" class="block ">Open Modal</button>

                    <!-- The Modal -->
                    <div id="myModal" class="modal">

                        <!-- Modal content -->
                        <div class="modal-content">
                            <span class="close">&times;</span>
                            <p>Some text in the Modal..</p>
                        </div>

                    </div>
                </td>
                <td class='btn-cell'><button id="myBtn2" class="block ">Open Modal</button></td>
                <td>Germany</td>
            </tr>
            <tr>

                <td>Berglunds snabbköp</td>
                <td>Christina Berglund</td>
                <td>Sweden</td>
            </tr>
            <tr>
                <td></td>
                <td>Centro comercial Moctezuma</td>
                <td>Francisco Chang</td>
                <td>Mexico</td>
            </tr>   
            ...
            
        </table>

    </center>



    <script>
        // Get the modal
        var modal = document.getElementById("myModal");

        // Get the button that opens the modal
        var btn = document.getElementById("myBtn2");

        // Get the <span> element that closes the modal
        var span = document.getElementsByClassName("close")[0];

        // When the user clicks the button, open the modal 
        btn.onclick = function() {
            modal.style.display = "block";
            togglePadding(true)
        }

        // When the user clicks on <span> (x), close the modal
        span.onclick = function() {
            modal.style.display = "none";
            togglePadding()
        }

        // When the user clicks anywhere outside of the modal, close it
        window.onclick = function(event) {
            if (event.target == modal) {
                modal.style.display = "none";
                togglePadding()
            }
        }

        var togglePadding = function(add) {
          var buttonCells = document.getElementsByClassName('btn-cell')
            for (var i = 0; i < buttonCells.length; i++) {
              if (add) {
                buttonCells[i].classList.add('modal-open')
              }
              else {
                buttonCells[i].classList.remove('modal-open')
              }
            }
        }

    </script>

Answer 5

Answer №3

Utilizing an id selector on the parent element #tabletu td takes precedence over the class selector .modal td. To override the id selector, simply apply !important:

.modal td {padding:0} !important

Answer 6

Utilizing an id selector on the parent element #tabletu td takes precedence over the class selector .modal td. To override the id selector, simply apply !important:

.modal td {padding:0} !important

What is the best way to target a nested selector in CSS?

Answer №1

Answer №2

Answer №3

Similar questions

perfecting the animation of popovers

BorderWoocommerce

Difficulty in making Materialize.css column match the height of the entire row

jQuery - patience is required until all elements have completely faded away

Leveraging Bootstrap column classes with diverse div heights

Incomplete Website Encryption Alert

Improving Storage of Message Data in MySQL with PHP

Removing a background by linking a CSS file

Step-by-step guide on clicking an href link with Selenium

Using JQuery to Execute Matching Based on Text Within <A> Elements

Navigate through information within designated boundaries

Initiating a node request within an HTML document

The HTML content retrieved through an ajax service call may appear distorted momentarily until the JavaScript and CSS styles are fully applied

Creating a website that can be customized with different themes

Utilize HTML5, CSS, and Responsive Web Design to place four boxes into a div container

Steps to adding a collection of links (stylesheets, javascript files) to each html document

Having trouble getting the HTML5 Canvas element to display on iOS Chrome or Safari?

Personalize the hover effect of CardActionArea

Show [image not available] if image src does not display an image

Display "No results found" on the auto-complete search list when the specified element does not exist