how to delete tr from table with help of css

Question

I'm trying to hide current row (value of select) of table with CSS only.

I expect to delete all not high level rows when option high is selected.

table,
td {
  border-collapse: collapse;
}

table {
  overflow: hidden;
}

td {
  padding: 5px 10px;
  border-bottom: 1px solid #ccc;
}

tr:nth-child(2n + 1) {
  background-color: #299dff;
}

tr:hover {
  background-color: red;
}

option[value="high"]:checked :not(tr[data-level="high"]) {
  display: none;
}

option[value="medium"]:checked :not(td[data-level="medium"]) {
  display: none;
}

<div class="controls">
  <label for="level">level</label>
  <select name="level" id="level">
    <option value="high">high</option>
    <option value="medium">medium</option>
    <option value="low">low</option>
  </select>
  <label for="daytime">daytime</label>
  <select name="daytime" id="daytime">
    <option value="first">first</option>
    <option value="second">second</option>
  </select>
  <label for="speciality">speciality</label>
  <select name="speciality" id="speciality">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
  </select>
</div>
<table>
  <thead>
    <tr>
      <th>speciality</th>
      <th>name</th>
      <th>level</th>
      <th>number</th>
      <th>daytime</th>
    </tr>
  </thead>
  <tbody>
    <tr data-level="high" data-daytime="first" data-speciality="1">
      <td>стоматолог</td>
      <td>комірка 1:2</td>
      <td>комірка 1:3</td>
      <td>комірка 1:4</td>
      <td>комірка 1:5</td>
    </tr>
    <tr data-level="medium" data-daytime="second" data-speciality="2">
      <td>комірка 2:1</td>
      <td>комірка 2:2</td>
      <td>комірка 2:3</td>
      <td>комірка 2:4</td>
      <td>комірка 2:5</td>
    </tr>
    <tr data-level="low" data-daytime="second" data-speciality="3">
      <td>комірка 3:1</td>
      <td>комірка 3:2</td>
      <td>комірка 3:3</td>
      <td>комірка 3:4</td>
      <td>комірка 3:5</td>
    </tr>
    <tr data-level="medium" data-daytime="first" data-speciality="4">
      <td>комірка 4:1</td>
      <td>комірка 4:2</td>
      <td>комірка 4:3</td>
      <td>комірка 4:4</td>
      <td>комірка 4:5</td>
    </tr>
    <tr data-level="high" data-daytime="second" data-speciality="4">
      <td>комірка 5:1</td>
      <td>комірка 5:2</td>
      <td>комірка 5:3</td>
      <td>комірка 5:4</td>
      <td>комірка 5:5</td>
    </tr>
    <tr data-level="low" data-daytime="first" data-speciality="1">
      <td>комірка 6:1</td>
      <td>комірка 6:2</td>
      <td>комірка 6:3</td>
      <td>комірка 6:4</td>
      <td>комірка 6:5</td>
    </tr>
  </tbody>

</table>

My code on jsfiddle.

Answer 1

• When you take a CSS selector and make it more specific, you can only access the siblings or the children of your previous selection. This means if a selector starts with option[value="high"], then all you can select by adding something to the right of that selector is the option elements that come after it within the same <select> tag.

• The "value" attribute states what is the value of an option, but not what the selected value is. There is no way to read the selected value of a select in CSS. As mentionned by soulshined in the comments, you need to use :checked to select the currently selected option.

Answer 2

visibility: collapse

Set visibility: collapse to each <tr> and they will shrink. In the demo:

• a hidden radio button group is at the top of the .controls

• select#level was replaced by details#level because <label> does not function inside an <option>

• each <label> in #level is associated to a radio button by the [for] attribute and when clicked, the associated hidden radio button is either :checked or not.

• when :checked it will trigger a new style that affects a specific .class of <tr>

 #H:checked~table>tbody>tr.H,
 #M:checked~table>tbody>tr.M,
 #L:checked~table>tbody>tr.L {
   visibility: collapse;
 }

The ruleset above declares:

"If #H, #M, or #L is :checked...
...then any sibling <table> that follows ~...
...that has a <tbody>...
...and the <tbody> has any tr.H, tr.M, or tr.L...
...set visibility: collapse; on the appropriate <tr>"

---

Demo

form {
  width: 100%
}

table {
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;
  overflow: hidden;
}

th {
  width: 20%;
}

td {
  padding: 5px 10px;
  border-bottom: 1px solid #ccc;
}

tr:nth-child(2n + 1) {
  background-color: #299dff;
}

tr:hover {
  background-color: red;
}

.controls {
  position: relative;
  max-height: 40px;
  overflow-y: visible;
}

.daytime {
  margin-left: 15vw;
}

.rad {
  display: none
}

#H:checked~.controls>#level>.H,
#M:checked~.controls>#level>.M,
#L:checked+.controls>#level>.L {
  background: red;
  color: white;
}

tr {
  visibility: visible;
}

.rad:checked~table>tbody>tr {
  visibility: collapse;
}

#A:checked~table>tbody>tr,
#H:checked~table>tbody>tr.H,
#M:checked~table>tbody>tr.M,
#L:checked~table>tbody>tr.L {
  visibility: visible;
}

details {
  outline: 1px solid #000;
  padding: 0;
  display: inline-block;
  position: absolute;
  top: 7px;
  left: 13px;
  z-index: 1;
}

summary {
  font-size: normal;
  padding: 0 5px;
}

details label {
  display: block;
  cursor: pointer;
  border-bottom: 1px solid grey;
  background: #fff;
}

<form id='main'>
  <input id='A' class='rad' name='rad' type='radio'>
  <input id='H' class='rad' name='rad' type='radio'>
  <input id='M' class='rad' name='rad' type='radio'>
  <input id='L' class='rad' name='rad' type='radio'>
  <fieldset class="controls">
    <details name="level" id="level">
      <summary>Level</summary>
      <label for='A' class='A'>All</label>
      <label for='H' class='H'>High</label>
      <label for='M' class='M'>Mid</label>
      <label for='L' class='L'>Low</label>
    </details>
    <label for="daytime" class='daytime'>daytime</label>
    <select name="daytime" id="daytime">
      <option value="first">first</option>
      <option value="second">second</option>
    </select>
    <label for="speciality">speciality</label>
    <select name="speciality" id="speciality">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
    </select>
  </fieldset>
  <table>
    <thead>
      <tr>
        <th>speciality</th>
        <th>name</th>
        <th>level</th>
        <th>number</th>
        <th>daytime</th>
      </tr>
    </thead>
    <tbody>
      <tr class='H' data-level="high" data-daytime="first" data-speciality="1">
        <td>стоматолог</td>
        <td>комірка 1:2</td>
        <td>комірка 1:3</td>
        <td>комірка 1:4</td>
        <td>комірка 1:5</td>
      </tr>
      <tr class='M' data-level="mid" data-daytime="second" data-speciality="2">
        <td>комірка 2:1</td>
        <td>комірка 2:2</td>
        <td>комірка 2:3</td>
        <td>комірка 2:4</td>
        <td>комірка 2:5</td>
      </tr>
      <tr class='L' data-level="low" data-daytime="second" data-speciality="3">
        <td>комірка 3:1</td>
        <td>комірка 3:2</td>
        <td>комірка 3:3</td>
        <td>комірка 3:4</td>
        <td>комірка 3:5</td>
      </tr>
      <tr class='H' data-level="high" data-daytime="second" data-speciality="4">
        <td>комірка 5:1</td>
        <td>комірка 5:2</td>
        <td>комірка 5:3</td>
        <td>комірка 5:4</td>
        <td>комірка 5:5</td>
      </tr>
      <tr class='M' data-level="mid" data-daytime="first" data-speciality="4">
        <td>комірка 4:1</td>
        <td>комірка 4:2</td>
        <td>комірка 4:3</td>
        <td>комірка 4:4</td>
        <td>комірка 4:5</td>
      </tr>
      <tr class='L' data-level="low" data-daytime="first" data-speciality="1">
        <td>комірка 6:1</td>
        <td>комірка 6:2</td>
        <td>комірка 6:3</td>
        <td>комірка 6:4</td>
        <td>комірка 6:5</td>
      </tr>
    </tbody>

  </table>
</form>