1

I have created one common.css file that is used in several HTML documents. My question is why some CSS rules are not applied, for example:

this part is not applied

*:not(small) {
  box-sizing: border-box;
  font-family: 'Palatino Linotype';
  font-size: 30px;
}

every other rule are working

*:not(small) {
  box-sizing: border-box;
  font-family: 'Palatino Linotype';
  font-size: 30px;
}

.input-span {
  display: inline-block;
  border: none;
  padding: 1px;
  outline: none;
  text-align: center;
  min-width: 100px;
  font-style: italic;
  border-bottom: 1px solid grey;
}

.input-span:focus {
  border-color: blue;
}

table.table {
  border-collapse: collapse;
}

table.table,
table.table th,
table.table td {
  border: 2px solid black;
}

.footer {
  margin-bottom: 50px;
}

@media print {
  .footer {
    page-break-before: always;
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <link href="./common.css" rel="stylesheet" type="text/css">

  <style type="text/css">

  </style>

</head>

<body>
  <form>
    <div>
      <small>Reviziya nömrəsi: 1.00</small>
    </div>
    <div style="text-align: center;">
      <h4 style="margin: 0;">
        Nömrənin abunəçinin adından başqa şəxsin adına keçirilməsi forması</br>
        (çoxsaylı nömrələr)
      </h4>
    </div>

    <div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
      <div>
        Nö *
      </div>
      <div>
        Tarix:
        <span class="input-span" contenteditable="false">{{date}}</span>
      </div>
    </div>

    <div style="display: flex; justify-content: space-evenly; margin-bottom: 8px">
      <p>Fakturalı xətt <input id="postpaid" type="checkbox">
      </p>
      <p>Fakturasız(SimSim) xətt <input id="prepaid" type="checkbox">
      </p>
    </div>

    <div style="display: flex; gap: 16px; margin-bottom: 8px ">
      <div>
        Abunəçiyə aid məlumatlar
      </div>
      <div style="flex-grow: 1;">
        <span style="width: 100%;" class="input-span" contenteditable="true">{{customer.contract.firstName}}
                    {{customer.contract.lastName}} {{customer.contract.patronymic}}</span>

        <p style="text-align: center; padding: 0; margin: 0;">
          <small>Adı Soyadı Atasının adı</small>
        </p>
      </div>
    </div>


    <div style="display: flex; gap: 16px; margin-bottom: 16px">
      <div>
        Sənədin seriyası / Nö
      </div>
      <div style="flex-grow: 1;">
        <span style="width: 100%;" class="input-span" contenteditable="true">{{customer.contract.documentNumber}}</span>
      </div>
    </div>


    <div style="display: flex; gap: 16px; margin-bottom: 8px ">
      <div>
        Nömrəni adına keçirən şəxs
      </div>
      <div style="flex-grow: 1;">
        <span style="width: 100%;" class="input-span" contenteditable="true">{{inputs.newUserfirstName}}
                    {{inputs.newUserLastName}} {{inputs.newUserPatronymic}}</span>

        <p style="text-align: center; padding: 0; margin: 0;">
          <small>Adı Soyadı Atasının adı</small>
        </p>
      </div>
    </div>


    <div style="display: flex; gap: 16px; margin-bottom: 8px">
      <div>
        Sənədin seriyası / Nö
      </div>
      <div style="flex-grow: 1;">
        <span style="width: 100%;" class="input-span" contenteditable="true">{{inputs.newUserDocumentNumber}}</span>
      </div>
    </div>

    <p>*nömrələrin siyahısı əlavə edilir</p>


    <p>Tərəflər aşağıdakı şərtlərdən xəbərdardırlar:
    </p>

  </form>

  <script language="javascript">
    let customerType = '{{customer.customerType}}';

    if (customerType.toLowerCase() === 'prepaid') {
      document.querySelector('input#prepaid').checked = true;
    } else if (customerType.toLowerCase() === 'postpaid') {
      document.querySelector('input#postpaid').checked = true;
    }


    function addRow(tableName) {

      var table = document.getElementById(tableName);
      var rowCount = table.rows.length;

      var cellCount = table.rows[table.rows.length - 1].cells.length;

      var row = table.insertRow();

      for (let i = 0; i < cellCount; i++) {
        var cell = row.insertCell(i);
        if (i === 0) {
          cell.innerText = rowCount + '.';
        } else {
          cell.innerHTML = '<span class="input-span" contenteditable="true"></span>';
        }
      }

    }

    for (let i = 0; i < 5; i++) {
      addRow('table');
    }
  </script>
</body>

</html>
Pete
  • 57,112
  • 28
  • 117
  • 166
Heybat
  • 312
  • 6
  • 17
  • 1
    nothing to do with your problem, but you don't need to use self closing br tags anymore, but if you do, the slash goes after the br, not before – Pete Dec 18 '20 at 13:19

1 Answers1

1

Try putting just the code that is not running on the bottom of your CSS file. Sometimes, the code does get applied but then overwritten after your browser runs the rest of the CSS file. So your CSS file should look like this:

.input-span {
  display: inline-block;
  border: none;
  padding: 1px;
  outline: none;
  text-align: center;
  min-width: 100px;
  font-style: italic;
  border-bottom: 1px solid grey;
}

.input-span:focus {
  border-color: blue;
}

table.table {
  border-collapse: collapse;
}

table.table,
table.table th,
table.table td {
  border: 2px solid black;
}

.footer {
  margin-bottom: 50px;
}

@media print {
  .footer {
    page-break-before: always;
  }
}
*:not(small) {
  box-sizing: border-box;
  font-family: 'Palatino Linotype';
  font-size: 30px;
}
Sid Nutthi
  • 161
  • 8