CSS Pseudo-classes: :not() and :target

This article explores the versatile CSS pseudo-classes :not() and :target, showcasing their power in creating sophisticated and targeted styles. We'll delve into their functionalities and demonstrate practical applications, including building JavaScript-free tabs.

Key Concepts:

• The :not() pseudo-class acts as a filter, selecting all elements except those matching a given selector. This allows for precise exclusion of elements from styling rules.
• The :target pseudo-class highlights the document section corresponding to a specific URL fragment (the part after the # symbol). This enables creating interactive elements without JavaScript.

JavaScript-less Tabs with :target:

By cleverly manipulating URL fragments and the :target pseudo-class, we can build functional tabbed interfaces without relying on JavaScript. Clicking a tab updates the URL fragment, triggering the :target style on the corresponding tab content, making it the visible layer.

Excluding Elements with :not():

:not()'s power lies in its ability to exclude elements from style rules. However, its current limitation of accepting only a single argument necessitates chaining for multiple exclusions. For instance, input:not([type=radio]):not([type=checkbox]):not([type=range]) selects all input elements except radio buttons, checkboxes, and range inputs. Future CSS specifications promise improved functionality, allowing comma-separated arguments within :not().

Excerpt from "CSS Master" by Tiffany B. Brown. Available in bookstores and as an ebook.

This section explores advanced pseudo-classes, including child-indexed and typed child-indexed pseudo-classes (selecting elements by position in the document tree) and input pseudo-classes (targeting form fields based on their values and states).

Highlighting Page Fragments:

Fragment identifiers (e.g., #top, #footnote1) are used for in-page navigation. The :target pseudo-class lets us style the section matching the current fragment identifier without JavaScript. For example:

.comment:target {
  background: #ffeb3b;
  border-color: #ffc107;
}

This styles comments with a yellow background when their ID matches the URL fragment.

Creating CSS-only Tabs:

The :target pseudo-class is key to creating JavaScript-free tabs. By setting z-index values based on the :target state, we ensure that only the selected tab is visible.

.comment:target {
  background: #ffeb3b;
  border-color: #ffc107;
}

<div class="tabbed-widget">
  <div class="tab-wrap">
    <a href="https://www.php.cn/link/7426f79c9a7f5af0a6cc457b2a7fb195">Tab 1</a>
    <a href="https://www.php.cn/link/60430f4a984aa0a534e027339a7580a7">Tab 2</a>
    <a href="https://www.php.cn/link/9d4f684ba088d28ad1c2ae7d0aee496a">Tab 3</a>
  </div>
  <ul class="tab-body">
    <li id="tab1"><p>This is tab 1.</p></li>
    <li id="tab2"><p>This is tab 2.</p></li>
    <li id="tab3"><p>This is tab 3.</p></li>
  </ul>
</div>

Accessibility Tip: For better accessibility, consider using JavaScript to manage aria-hidden attributes.

:not() in Action:

The :not() pseudo-class is demonstrated by styling form labels, excluding those with the label-radio class.

[id^=tab] { position: absolute; }
[id^=tab]:first-child { z-index: 1; }
[id^=tab]:target { z-index: 2; }

Chaining :not() is crucial when excluding multiple element types, as shown below:

label:not(.label-radio) {
  font-weight: bold;
  display: block;
}

This efficiently targets all input types except radio, checkbox, and range.

FAQs on :not() Selector:

This section provides answers to common questions regarding the :not() selector, covering its functionality, browser support, and usage with various CSS selectors. The answers are similar to those in the original text, but rephrased for clarity and conciseness.

The above is the detailed content of CSS Pseudo-classes: :not() and :target. For more information, please follow other related articles on the PHP Chinese website!