How to select all child elements of an element (except the last one) using CSS?-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

How to select all child elements of an element (except the last one) using CSS?

PHPz

Sep 16, 2023 am 08:45 AM

如何使用 CSS 选择元素的所有子元素（除了最后一个子元素）？

CSS is a commonly used web page style. When developing web applications, we sometimes need to apply different styles to different elements. This common requirement is to select all child elements of an element except the last one! Apply CSS to select all child elements of an element (except the last child element).

In this article, we will see how to select all but the last child element in CSS using different methods. We'll discuss each method and its syntax in detail, along with examples to help you understand how they work.

The first way to select all child elements except the last one involves using the :not() selector, which allows you to select all elements that do not match a specific selector. The second method involves using the :nth-last-child() selector, which selects all elements that are the nth child from the end of the parent element. In this method, we specify the n 2 parameter, which helps select all the child elements of the element (except the last child element in HTML).

Both methods are very useful when developing web applications, and they may help implement the UI required for the web page. Using the selectors discussed above helps us understand how these selectors work, and we can create custom styles for functionality and UI for our web pages.

Method 1: Use :not selector

- The not selector is a powerful CSS selector that allows you to select all elements except those that match a specific condition. To select all child elements except the last one, we can use :not selector with :last-child selector.

To use the - not() selector to select all children of an element (except the last child), we use it with the :last-child selector. :last-child selector helps to select the last child element of an element. By using a combination of this approach with two selectors, we can select all child elements of an element except the last one.

The following is the syntax for how to use the :not() selector to select all child elements of the parent element (except the last child element) -

grammar

In the syntax below, .parent is the selector for the parent element, > selects all its direct child elements, * selects all child elements, and :not(:last-child) excludes the last child element from selection.

.parent > *:not(:last-child) {
  /* styles for all children except the last one */
}

Example

In this example, the CSS selector .parent > *:not(:last-child) selects all direct children of the .parent class element (that is, h1, h2, p, and span elements), except the last child element , that is, element. Using CSS, we apply the "color" property to the first three child elements of the .parent element (i.e. the h1, h2 and p elements), while the fourth child element (i.e. the element) is not affected. 跨度>跨度>

Now let’s see how to apply the CSS code to the code of the HTML page -

<!DOCTYPE html>
<html >
   <head>
      <style>
         .parent > *:not(:last-child) {
            color: green;
         }
      </style>
   </head>
   <body>
      <div class="parent">
         <h1 id="First-Child">First Child</h1>
         <h2 id="Second-Child">Second Child</h2>
         <p>Third Child</p>
         <span>Fourth Child</span>
      </div>
   </body>
</html>

Method 2: Use:nth-last-child() selector

- The nth-last-child() selector is another useful tool in CSS that allows you to select an element based on its position in the element's list of children. We can use this to select all but the last child by using :nth-last-child(n 2) to select all but the last child.

To use the :nth-last-child() selector to select all child elements except the last child element, we can specify the n 2 parameter. The parameters defined use CSS to select all elements of the HTML except the last child element, which is the last child element.

The following is the syntax for how to use the :nth-last-child() selector to select all child elements of the parent element (except the last child element) -

grammar

In the following syntax, .parent is the selector of the parent element, > selects all its direct child elements, * selects all child elements, :nth-last-child(n 2) selects all but the last one Child element children.

.parent > *:nth-last-child(n+2) {
   /* styles for all children except the last one */
}

Example

In this example, the CSS selector .parent > *:nth-last-child(n 2) selects all direct child elements of the .parent class element, except the last child element. Here, all button elements inside the .parent element will be selected, but the last button element will not be selected.

Multiple CSS properties have been applied to the first three buttons, but the CSS style is not added to the last child button.

Now let’s see how to apply the CSS code to the code of the HTML page -

<!DOCTYPE html>
<html >
   <head>
      <style>
         .parent > *:nth-last-child(n+2) {
            background-color: green;
            padding: 10px;
            color: white;
            border-radius: 10px;
            width: 10em;
            text-decoration: none;
            font-family: sans-serif;
            border: none;
         }
      </style>
   </head>
   <body>
      <div class="parent">
      <button>First</button>
      <button>Second</button>
      <button>Third</button>
      <button>Fourth</button>
   </div>
   </body>
</html>

结论

在本文中，我们了解了如何使用不同的方法选择元素的所有子元素（除了最后一个子元素）。在 CSS 选择器的帮助下，选择子项是一个轻松的过程，因为它提供了多个可用于执行此任务的选择器，例如 :not() 选择器和 :nth-last-child() 选择器。上面讨论的两个示例都展示了 CSS 在将不同样式应用于元素的所有子元素（最后一个元素除外）方面的作用。这两个选择器都可以帮助我们轻松地将不同的 CSS 样式应用于不同的 HTML 元素，不仅如此，它还有助于轻松创建动态网站。

The above is the detailed content of How to select all child elements of an element (except the last one) using CSS?. For more information, please follow other related articles on the PHP Chinese website!

Statement

This article is reproduced at:tutorialspoint. If there is any infringement, please contact admin@php.cn delete

Iterating a React Design with Styled ComponentsApr 21, 2025 am 11:29 AM

In a perfect world, our projects would have unlimited resources and time. Our teams would begin coding with well thought out and highly refined UX designs.

Oh, the Many Ways to Make Triangular Breadcrumb Ribbons!Apr 21, 2025 am 11:26 AM

Oh, the Many Ways to Make Triangular Breadcrumb Ribbons

SVG Properties in CSS GuideApr 21, 2025 am 11:21 AM

SVG has its own set of elements, attributes and properties to the extent that inline SVG code can get long and complex. By leveraging CSS and some of the forthcoming features of the SVG 2 specification, we can reduce that code for cleaner markup.

A Few Functional Uses for Intersection Observer to Know When an Element is in ViewApr 21, 2025 am 11:19 AM

You might not know this, but JavaScript has stealthily accumulated quite a number of observers in recent times, and Intersection Observer is a part of that

Revisting prefers-reduced-motionApr 21, 2025 am 11:18 AM

We may not need to throw out all CSS animations. Remember, it’s prefers-reduced-motion, not prefers-no-motion.

How to Get a Progressive Web App into the Google Play StoreApr 21, 2025 am 11:10 AM

PWA (Progressive Web Apps) have been with us for some time now. Yet, each time I try explaining it to clients, the same question pops up: "Will my users be

The Simplest Ways to Handle HTML IncludesApr 21, 2025 am 11:09 AM

It's extremely surprising to me that HTML has never had any way to include other HTML files within it. Nor does there seem to be anything on the horizon that