How to set up plain text, not text in tags?

Question

Is there a way to orient straight text inside <h1>-Tag?

Here is an example of what I want to do:

<h1>I want to select this text with a css selector <small>but not this text</small></h1>

This does not work:

h1:not(small)

Is it possible?

Answer 1

h1:not(small)

Your selector h1:not(small)does not work because it says this:

Target all elements h1that are not elements small.

This is the same as the selector h1.

---

h1 :not(small)

You would be closer to h1 :not(small), which says:

Target all descendants of elements h1except small.

Boom! Exactly what you want.

, (.. ) . CSS.

h1 :not(small) {
  color: orange;
}

<h1>This text is contained directly inside the container. It is not selectable by CSS. It is an anonymous element. <small>This text is inside a small element</small></h1>

<hr>

<h1><span>This text is contained in a span. It is selectable by CSS</span> <small>This text is inside a small element</small></h1>

---

CSS

small, h1.

CSS.

---

:

:

• .
• .

h1 {
  color: orange;
}

h1 > small {
  color: black;
}

<h1>I want to select this text with a css selector <small>but not this text</small></h1>

---

• CSS
• flex?
• , ?

Answer 2

- css, div. , . , .

-

?

CSS . , .

small {
  all: initial;
  * {
    all: unset;
  }
}
h1 {
    color: #ff0000;
}

<h1>I want to select this tex with a css selector <small>but not this text</small></h1>

Answer 3

h1, , small, , , ;

h1 { color: red; }
h1 small { color: initial; }

, ,

h1 {
    color: red;
    font-weight: italic;
    text-transform: uppercase;
}

h1 small {
    color: initial;
    font-weight: initial;
    text-transform: initial;
}

Please note that initialCSS can be used in every browser, with the exception of IE and Opera Mini. Browse this page for more information.