Исключить элементы в выборе css

Question

Я пытаюсь установить фон для <article> как заданный градиент, но хотел бы исключить последнюю строку второй таблицы из этой градиентной раскраски. Я пробовал следующий CSS не повезло:

CSS

article.blogPosts:not(table.secondPost tr:last-child td:last-child) { 
    background: linear-gradient(to right, red , blue); 
} 

HTML

<article class = "blogPosts"> 

    <h2>Personal Programming Projects</h2> 

    <section class= "blogPost"> 
     <table class= "firstPost"> 
      <tr> 
      <th title = "20th October 2015">Blog post 2 - 20th October 2015 - <time datetime="2015-10-20 10:00">10:00</time>am</th> 
      <th><input type="checkbox"> <label>Read</label></th> 
      </tr> 
      <tr> 
      <td> 
       <h3>Student Reporting System - Full Stack Developer</h3> 
       <ul> 
        <li> Developed a student monitoring system to enable teachers to provide on-going reports on each student.</li> 
       </ul> 
      </td>  
      </tr> 
     </table> 
    </section> 

    <section class= "blogPost"> 
     <table class="secondPost"> 
      <tr> 
      <th title = "15th November 2015">Blog post 1 - 15th November 2015 - <time datetime="2015-10-20 10:00">10:00</time>am</th> 
      <th><input type="checkbox"> <label>Read</label> </th> 
      </tr> 
      <tr> 
      <td> 
       <h3>Software Engineering Group Project - Lead Programmer</h3> 
       <ul> 
        <li>Developed a fast food ordering system for our chosen business - Krusty's Pizza.</li> 
       </ul> 
      </td>  
      </tr> 
      <tr> 
      <td> 
      </td> 
      </tr> 
     </table> 
    </section> 

</article> 

Answer 1

article.blogPosts { 
    background: linear-gradient(to right, red , blue); 
} 
article.blogPosts .secondPost tr:last-child { 
    background: #fff; 
} 

Пожалуйста, попробуйте этот стиль. Надеюсь, что это поможет вам.

Answer 2

Селектор article.blogPosts стилирует весь элемент статьи. Исключение отдельных дочерних элементов с :not() не будет работать, потому что они не являются элементами с градиентом. Родитель. Явно окрашиваю строку, которую вы хотите исключить из градиента, выбрав ее с идентификатором.

article.blogPosts { 
 
    background: linear-gradient(to right, red, blue); 
 
} 
 
#lastRow { 
 
    background: white; 
 
}

<article class="blogPosts"> 
 

 
    <h2>Personal Programming Projects</h2> 
 

 
    <section class="blogPost"> 
 
    <table class="firstPost"> 
 
     <tr> 
 
     <th title="20th October 2015">Blog post 2 - 20th October 2015 - 
 
      <time datetime="2015-10-20 10:00">10:00</time>am</th> 
 
     <th> 
 
      <input type="checkbox"> 
 
      <label>Read</label> 
 
     </th> 
 
     </tr> 
 
     <tr> 
 
     <td> 
 
      <h3>Student Reporting System - Full Stack Developer</h3> 
 
      <ul> 
 
      <li>Developed a student monitoring system to enable teachers to provide on-going reports on each student.</li> 
 
      </ul> 
 
     </td> 
 
     </tr> 
 
    </table> 
 
    </section> 
 

 
    <section class="blogPost"> 
 
    <table class="secondPost"> 
 
     <tr> 
 
     <th title="15th November 2015">Blog post 1 - 15th November 2015 - 
 
      <time datetime="2015-10-20 10:00">10:00</time>am</th> 
 
     <th> 
 
      <input type="checkbox"> 
 
      <label>Read</label> 
 
     </th> 
 
     </tr> 
 
     <tr id="lastRow"> 
 
     <td> 
 
      <h3>Software Engineering Group Project - Lead Programmer</h3> 
 
      <ul> 
 
      <li>Developed a fast food ordering system for our chosen business - Krusty's Pizza.</li> 
 
      </ul> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td> 
 
     </td> 
 
     </tr> 
 
    </table> 
 
    </section> 
 

 
</article>

Answer 3

Вы не можете отменить родителей background-color.

Попробуйте

h2, 
 
.firstPost tr, 
 
.secondPost tr:not(:last-child) { 
 
    background: linear-gradient(to right, red , blue); 
 
} 
 

 

 

 

 
.blogPosts { 
 
    background-color: green; 
 
} 
 

 
h2 { 
 
    margin-bottom: 0; 
 
} 
 

 
table { 
 
    width: 100%; 
 
}

<article class="blogPosts"> 
 

 
    <h2>Personal Programming Projects</h2> 
 

 
    <section class="blogPost"> 
 
    <table class="firstPost"> 
 
     <tr> 
 
     <th title="20th October 2015">Blog post 2 - 20th October 2015 - 
 
      <time datetime="2015-10-20 10:00">10:00</time>am</th> 
 
     <th> 
 
      <input type="checkbox"> 
 
      <label>Read</label> 
 
     </th> 
 
     </tr> 
 
     <tr> 
 
     <td colspan="2"> 
 
      <h3>Student Reporting System - Full Stack Developer</h3> 
 
      <ul> 
 
      <li>Developed a student monitoring system to enable teachers to provide on-going reports on each student.</li> 
 
      </ul> 
 
     </td> 
 
     </tr> 
 
    </table> 
 
    </section> 
 

 
    <section class="blogPost"> 
 
    <table class="secondPost"> 
 
     <tr> 
 
     <th title="15th November 2015">Blog post 1 - 15th November 2015 - 
 
      <time datetime="2015-10-20 10:00">10:00</time>am</th> 
 
     <th> 
 
      <input type="checkbox"> 
 
      <label>Read</label> 
 
     </th> 
 
     </tr> 
 
     <tr id="lastRow"> 
 
     <td colspan="2"> 
 
      <h3>Software Engineering Group Project - Lead Programmer</h3> 
 
      <ul> 
 
      <li>Developed a fast food ordering system for our chosen business - Krusty's Pizza.</li> 
 
      </ul> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td colspan="2"> 
 
      excluded 
 
     </td> 
 
     </tr> 
 
    </table> 
 
    </section> 
 

 
</article>

Во всяком случае, вы опустить некоторые td элементы или colspan атрибуты цели?