prevent nth child from selecting element inside nested div

user_13543545 0
Viewed 46

I am creating a dynamic html page which result in a code similar to below:

<!DOCTYPE html>
<html>
   <head>
      <style>
         .ini table, th, td {
         border: 1px solid grey;
         }
         #hello table.tk-dtbl tbody tr td {
         background-color: white;
         }
         #hello tbody>:nth-child(2){
         height: 130px;
         }
      </style>
   </head>
   <body>
      <div id ="hello">
         <table>
         <tr>
            <td>first</td>
            <td>second</td>
         </tr>
         <tr>
            <td>third</td>
            <td>fourth</td>
         </tr>
         <tr>
            <td>This</td>
            <td>
               <div class="ini">
                  <table style="width:100%" >
                     <tr>
                        <th>Firstname</th>
                        <th>Lastname</th>
                        <th>Age</th>
                     </tr>
                     <tr>
                        <td>Jill</td>
                        <td>Smith</td>
                        <td>50</td>
                     </tr>
                     <tr>
                        <td>Eve</td>
                        <td>Jackson</td>
                        <td>94</td>
                     </tr>
                     <tr>
                        <td>John</td>
                        <td>Doe</td>
                        <td>80</td>
                     </tr>
                  </table>
               </div>
            </td>
         </tr>
         <tr>
            <td>fifth</td>
            <td>sixth</td>
         </tr>
         <table>
      </div>
   </body>
</html>

Check the html rendered here

I want only the second row Containing third fourth to be of size 150px and not the second row inside class ini is there any way to prevent nth-child from modifying content inside div ini.

Also border property of ini is used in id ="hello" can that be prevented using html and css only.

Edit: the table I am printing is dynamic one i.e. it's code is something like

 <uitk-tab-panel >
              <uitk-dynamic-table id="hello" [model]="MyDetailModel"
                                  [modelObservable]="MyDetails$"></uitk-dynamic-table>
            </uitk-tab-panel>

values are present in MyDetailModel so cannot directly modify it.

web-frontend frontend css html
1 Answers

You an modify the code as below to output the requirement. Add a new id for that specific which contain third and fourth. Also have a control over ini border by editing the css.

/** CSS **/ 

table, th, td {
         border: 1px solid grey;
         }
         tr#h-150 {
            height: 150px;
         }
         .ini table, .ini th, ini td {border: none}
<!-- HTML -->

<body>
      <div id ="hello">
         <table>
         <tr>
            <td>first</td>
            <td>second</td>
         </tr>
         <tr id="h-150">
            <td>third</td>
            <td>fourth</td>
         </tr>
         <tr>
            <td>This</td>
            <td>
               <div class="ini">
                  <table style="width:100%" >
                     <tr>
                        <th>Firstname</th>
                        <th>Lastname</th>
                        <th>Age</th>
                     </tr>
                     <tr>
                        <td>Jill</td>
                        <td>Smith</td>
                        <td>50</td>
                     </tr>
                     <tr>
                        <td>Eve</td>
                        <td>Jackson</td>
                        <td>94</td>
                     </tr>
                     <tr>
                        <td>John</td>
                        <td>Doe</td>
                        <td>80</td>
                     </tr>
                  </table>
               </div>
            </td>
         </tr>
         <tr>
            <td>fifth</td>
            <td>sixth</td>
         </tr>
         <table>
      </div>
   </body>

user_67743580
Related