Is There a CSS Selector for Element Without Any Class

Can I write a CSS selector selecting elements NOT having a certain class or attribute?

Typically you add a class selector to the :not() pseudo-class like so:

:not(.printable) {
    /* Styles */
}

:not([attribute]) {
    /* Styles */
}

But if you need better browser support (IE8 and older don't support :not()), you're probably better off creating style rules for elements that do have the "printable" class. If even that isn't feasible despite what you say about your actual markup, you may have to work your markup around that limitation.

Keep in mind that, depending on the properties you're setting in this rule, some of them may either be inherited by descendants that are .printable, or otherwise affect them one way or another. For example, although display is not inherited, setting display: none on a :not(.printable) will prevent it and all of its descendants from displaying, since it removes the element and its subtree from layout completely. You can often get around this by using visibility: hidden instead which will allow visible descendants to show, but the hidden elements will still affect layout as they originally did. In short, just be careful.

Is there a CSS selector for element without any class?

With section:not([class]) you select every section without the class attribute. Unfortunately, it won't select those sections with an empty class attribute value. So in addition, we have to exclude these sections:

section:not([class]) { /* every section without class - but won't select Section C */
  color: red;
}

section[class=""] { /* selects only Section C */
  font-weight: bold;
}

<section>Section A</section>
<section class="special">Section B</section>
<section class="">Section C</section>

th:not([class]) {  color: red;}

<table>  <tr>    <th style="position: relative; top: 0px;">      <div style="width: 48.003906px;" data-lngst="nullpx" data-ndx="2">123</div>    </th>    <th id="" class="abc_naem" nowrap="" style="position: relative; top: 0px;">      <div style="width: 44.003906px;" data-lngst="nullpx" data-ndx="4">123</div>      <th style="position: relative; top: 0px;">        <div style="width: 48.003906px;" data-lngst="nullpx" data-ndx="5">123</div>      </th>      <th id="" class="abc_phase" nowrap="" style="position: relative; top: 0px;">        <div style="width: 44.003906px;" data-lngst="nullpx" data-ndx="3">123</div>      </th>  </tr></table>

ul li:last-child {
  background-color: green;
}

ul li:last-of-type {
  border: dotted  red
}

<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li>D</li>
  <li>E</li>
  <li>F</li>
</ul>

.settings > ul > li > i {
  opacity: 0.5;
}

<div class="settings">
  <ul>
    <li>
      <i>Select this element</i>
      <ul>
        <li>
          <i>but not this one</i>
          <span></span>
        </li>
        <li>
          <i>or not this one</i>
          <span></span>
        </li>
      </ul>
    </li>
  </ul>
</div>

[] {
  color: blue;
}

[*] {
  color: red;
}

[""] { /* Seems to select nothing, rather than 'no attribute' */
  color: magenta;
}

<p>Clean element with no attributes</p>
<p class="has-class">Has class attribute</p>
<p id="has-id">Has ID attribute</p>
<p data-has-data-attribute="">Has data attribute</p>

input:not([type]), input[type='text'], input[type='password'] {
    /* style here */
}