Как задать стили тегу code, не находящегося внутри тега pre?

Question

На странице есть отдельные теги code, а есть теги code, находящиеся внутри тега pre. Как задать стили для тега code, чтобы они работали только для отдельного тега, не находящегося внутри тега pre?

Нужно, чтобы стили работали только для <code>code text</code>

Делаю это так, но не уверен, что это правильно:

*:not(pre)>code {
  white-space: nowrap;
  padding: 2px 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  background: #e9eaec;
  font-size: 14px;
  white-space: pre-wrap;
  word-break: break-all;
}

<pre>
    <code>
      Object object = getMyList();
      List&lt;Integer&gt; list = (List&lt;Integer&gt;) object;
    </code>
</pre>
<code>code text</code>

Answer 1

Правильным вариантом будет добавление класса:

code.inline {
  padding: 2px 4px;
  border-radius: 4px;
  font-size: 14px;
  white-space: pre-wrap;
  word-break: break-all;
  background: #e9eaec;
}

<pre>
  <code>
      Object object = getMyList();
      List&lt;Integer&gt; list = (List&lt;Integer&gt;) object;
  </code>
</pre>

<code class="inline">code text</code>

Но, раз хочется "дёшево и сердито", то так:

code {
  padding: 2px 4px;
  border-radius: 4px;
  font-size: 14px;
  white-space: pre-wrap;
  word-break: break-all;
  background: #e9eaec;
}

pre code { all: unset; }

<pre>
  <code>
      Object object = getMyList();
      List&lt;Integer&gt; list = (List&lt;Integer&gt;) object;
  </code>
</pre>

<code class="inline">code text</code>

БЛОГ НА HUSL

Как задать стили тегу code, не находящегося внутри тега pre?

Ответы (1 шт):