Question 372912 in Html Question posted in
Some basic documentation can be found here.

Html – confused by CSS precedence

I have 2 css rule sets applying to a cell of a table. I thought one set of rules would override the other, but it is picking and choosing some from each. the rules contradict each other.

the html is generated by javascript

const toDoArray = {
  test: true,
}

var toDoElements = "<table style="width: 100%;">";

for (var k in toDoArray) { // Loop through the object
  var trS = "";
  if (toDoArray[k]) {
    trS = `class="taskChecked"`
  }
  toDoElements +=
    `<tr ${trS} id="${k}-tr">
      <td onclick="checkOffToDo('${k}')" id = "${k}-td" border=none > ${k}</td>
      <td onclick="removeToDo('${k}')" class="toDoDeleteButton">&times;</td>     
    </tr>`
}

toDoElements += "</table>";

document.getElementById("toDoList").innerHTML = toDoElements;
#toDoList { width: 200px; font-size: 3rem; }

.taskChecked {
  text-decoration: line-through;
  text-decoration-color: violet;
  color: purple;
  background: orange;
}

.toDoDeleteButton {
  border: none;
  width: 8%;
  height: auto;
  text-decoration: none !important;
  text-decoration-color: aqua;
  color: yellow;
  background-color: blue;
}
<div id="toDoList"></div>

A yellow "x" with a violet strikethrough on a blue background

I found this StackOverflow Answer describing precedence (https://stackoverflow.com/a/25105841), but this doesn’t seem follow it.
If it followed all one, or all the other, I thought I could get it to work right, but now I’m just really confused.

My chief aim is to not give it a line through. the rest of the colors and stuff are me testing options trying to figure out what’s going on, and why its not working.

This is in Chrome.

Tags:

2

Answers


  1. 0

    Your "taskDef" class has text-decoration: line-through. That’s the <tr>, the whole row of the table. That will apply to both <td> elements in the table, the word and the "X".

    Now, why the cell style is not overriding the row style, I cannot say. It clearly has the style (well, no strike-through). I can’t say anything definitive, but if I were doing this I would not make a <td> element a "button"; instead put a real <button> in the cell and style it separately. That’ll probably require some other changes for the font size etc.

    This is strange.

    edit: commenters have explained that it’s specifically about text-decoration rules and how they operate on descendant text nodes.

    Login or Signup to reply.
  2. 0

    The most important thing is that text-decoration cant be inherited ,there are two lines are independent of each other in the test demo below,and in your case the parent text-decoration just on top of the child.

    <style>
  div {
    text-decoration: line-through
  }
  span {
    text-decoration: underline;
  }
</style>
<div>
  <span>text-decoration</span>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search