Css: not () selector not working

Question

How do I use the: not () selector wrong here? I am trying to select all elements except the element footer; I tried to reference the element footerwith my class entry-footer, but still the same result:

article.post .entry-wrapper :not(footer) {
  color: red;
}

<article id="post-92" class="post-92 post type-post status-publish format-standard hentry category-uncategorized">
  <div id="post-92-thumbnail" class="thumbnail-wrapper" style="background-image:url(
    	http://netdna.webdesignerdepot.com/uploads/2016/07/featured-768x438.jpg
    )"></div>
  <div class="entry-wrapper">
    <header class="entry-header">
      <div class="category-link"><a href="http://localhost/wordpress/?cat=1" rel="category">Uncategorized</a>
      </div>
      <h2 class="entry-title"><a href="http://localhost/wordpress/?p=92" rel="bookmark">Article title</a></h2>	
      <div class="entry-meta">
      </div>
      <!-- .entry-meta -->
    </header>
    <!-- .entry-header -->
    <div class="entry-content">
      <p>Excerpt</p>
    </div>
    <!-- .entry-content -->
    <footer class="entry-footer">
      <span>December 2, 2016 by <a href="http://localhost/wordpress/?author=1">xp95</a></span>
    </footer>
    <!-- .entry-footer -->
  </div>
</article>

Run codeHide result

Answer 1

Your selector does not actually selects an item footer, but it selects the child elements spanand athis element and makes the text inside them in red. The selector :notwill exclude only individual elements.

>, .entry-wrapper. , .

article.post .entry-wrapper > :not(footer),
article.post .entry-wrapper > :not(footer) *
{
    color:red;
}

<article id="post-92" class="post-92 post type-post status-publish format-standard hentry category-uncategorized">
<div id="post-92-thumbnail" class="thumbnail-wrapper" style="background-image:url(
    http://netdna.webdesignerdepot.com/uploads/2016/07/featured-768x438.jpg
)"></div>
<div class="entry-wrapper">
    <header class="entry-header">
    <div class="category-link"><a href="http://localhost/wordpress/?cat=1" rel="category">Uncategorized</a></div>
        <h2 class="entry-title"><a href="http://localhost/wordpress/?p=92" rel="bookmark">Article title</a></h2>		<div class="entry-meta">
        </div><!-- .entry-meta -->
            </header><!-- .entry-header -->
    <div class="entry-content">
        <p>Excerpt</p>
    </div><!-- .entry-content -->
    <footer class="entry-footer">
        <span>December 2, 2016 by <a href="http://localhost/wordpress/?author=1">xp95</a></span>
    </footer><!-- .entry-footer -->
    </div>
</article>

Hide result

Answer 2

, :

article.post .entry-wrapper *:not(.entry-footer)

Answer 3

Using a child combinator :

article.post .entry-wrapper > :not(footer) {
  color: red;
}

<article id="post-92" class="post-92 post type-post status-publish format-standard hentry category-uncategorized">
  <div class="entry-wrapper">
    
  <div>** All the text **</div><br />
    
  <footer class="entry-footer">
      This is :not() working in footer!<br />
      <span>December 2, 2016 by <a href="http://localhost/wordpress/?author=1">xp95</a><br />
        :not() working within tags under footer.
      </span>
    </footer>
    <!-- .entry-footer -->
  </div>
</article>

Run codeHide result