CODEWITHSUNDEEP
css
7asobate-
7asobate-

Reputation: 90

css :not() selector is not working

How I'm using the :not() selector wrong here? I'm trying to select all elements except the footer element; I tried with referring to the footer element with its 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>

Upvotes: 4

Views: 3776

Answers (3)

Ani Menon
Ani Menon

Reputation: 28199

By using 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>

Upvotes: 1

Alexander O&#39;Mara
Alexander O&#39;Mara

Reputation: 60507

Your selector actually isn't selecting the footer element, but it is selecting the span and a children of that element, and turning the text inside them red. The :not selector will only exclude single elements.

Try the direct child selector > to only select direct children of .entry-wrapper. You can combine two similar selectors to get the children of the other elements too.

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>

Upvotes: 4

user80276
user80276

Reputation:

Try this maybe:

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

Upvotes: 1

Related Questions