如何定位除特定容器内的所有h2标签外的所有标签

Question

I have an article that contains a gallery, but I do not want the styling for the article's h2 tags to affect h2's inside the gallery. I have tried using the :not() pseudo class, but it seems I can't use this for this problem.

I want to know if it's possible without overriding the article h2 styling. (In this case it h2 but it actually concerns a lot of tags and a lot of css).

Example

HTML:

<h2>This is a default h2</h2>
<div class="article">
  <h2>This should use article h2 styling</h2>
  <p>Paragraph 1</p>
  <div class="gallery">
    <h2>This should use default styling</h2>
    <p>Paragraph 2</p>
  </div>
  <p>Paragraph 3</p>
</div>

CSS:

h2 {
  font-size: 30px;
  color: green;
}
.article h2 {
  font-size: 20px;
  color: blue;
}
.gallery {
  border: 1px solid #000;
  padding: 10px;
}

Working example: https://jsfiddle.net/sorenhusted/b774p8be/3/

Answer 1

You need the direct child selector > .

Per MDN

The > combinator separates two selectors and matches only those elements matched by the second selector that are direct children of elements matched by the first. By contrast, when two selectors are combined with the descendant selector, the combined selector expression matches those elements matched by the second selector for which there exists an ancestor element matched by the first selector, regardless of the number of "hops" up the DOM.

.article > h2 {
  font-size: 20px;
  color: blue;
}

JSFiddle Demo

Answer 2

Try:

.article>h2 {
  font-size: 20px;
  color: blue;
}

Example: https://jsfiddle.net/b774p8be/4/

Answer 3

Direct child accessor ( > ) is your friend!

In your CSS, just replace .article h2 with .article > h2 , and there you go :-)

Basically, it says that "only an h2 element which is a direct child of a .article element will be affected.

https://jsfiddle.net/b774p8be/6/

Answer 4

You can assign .article .gallery h2 to the same style used for default h2 likeso:

h2, .article .gallery h2 {
 font-size: 30px;
 color: green;
}