Do these 3 things before closing this tab:
1Scan for outdated or missing drivers - takes under a minute2Clear out junk files and repair common Windows errors3Fix the driver behind crashes, sound loss and screen glitchesCSS pseudo-classes let you style an element according to its state, position, or relationship to other elements—without adding a class in JavaScript. For example, use :hover for pointer interaction, :focus-visible for keyboard-friendly focus styling, :nth-child() for sibling positions, and :has() when an element’s style should depend on a related element.
What is a CSS pseudo-class?
A pseudo-class is a selector that matches an element based on information that is not expressed by its ordinary name, class, or ID. That information can be a changing state, such as whether a control is checked, or a context, such as an element’s position among its siblings. A pseudo-class starts with one colon; functional pseudo-classes accept arguments in parentheses. The matched element is the element the pseudo-class is attached to.
For example, button:hover matches a button while it is designated by a pointer. The button is the matched element; :hover describes the condition under which the rule applies. Because some conditions change as a person interacts with a page, the match can change without the document’s markup changing. See the W3C Selectors Level 4 specification and MDN’s pseudo-class reference.
Pseudo-class versus pseudo-element
A pseudo-class selects an existing element in a state or context, as in a:focus. A pseudo-element represents a particular part of an element, as in p::before. Use the modern double-colon spelling for pseudo-elements. The single-colon forms remain recognized for the legacy pseudo-elements ::before, ::after, ::first-line, and ::first-letter; new code should use double colons. See the W3C specification.
Free tools Windows power users keep installed
One-click scans. No signup required.
#1 Best Overall
- Read Before You Buy — No Video Output: These adapters support charging and USB 2.0 data transfer, but cannot transmit video signals. Except for standard USB webcams (which use USB data only), they are not compatible with HDMI/DisplayPort cables, video-capable USB-C hubs, or docking stations with video output.
- Convert USB-A Ports to USB-C: Designed to connect USB-C earphones, cables, flash drives, card readers, and other USB-C accessories to standard USB-A ports. Plug-and-play with no drivers or software required.
- Aluminum Alloy Housing: Built with a sturdy aluminum alloy shell that aids in heat dissipation and protects against daily wear and scratches. Designed to maintain a stable and secure connection.
- Compact & Travel-Friendly: The ultra-compact design allows the adapter to stay plugged into your device without blocking adjacent ports or adding bulk, reducing wear and tear on your original USB ports.
- 12-Month Warranty: Backed by a 12-month manufacturer warranty for peace of mind. Designed to meet strict quality control standards for reliable everyday performance.
Which pseudo-class should you use?
| Need | Useful selectors | What they match |
|---|---|---|
| Pointer or keyboard interaction | :hover, :active, :focus, :focus-visible |
Pointer designation, activation, input focus, or focus for which the browser determines a visible indicator is appropriate. |
| Position among siblings | :first-child, :last-child, :nth-child() |
Position in the complete sibling set. |
| Position among siblings of the same element type | :first-of-type, :last-of-type, :nth-of-type() |
Position after restricting the sibling set to a particular element type. |
| Native form state | :checked, :disabled, :required, :valid, :invalid |
A control’s checked, disabled, required, or validity state. |
| Related elements or selector alternatives | :has(), :is(), :not(), :where() |
A relationship, a match to any listed alternative, an exclusion, or alternatives grouped without added specificity. |
| Document location or root | :target, :root, :empty |
An element targeted by the URL fragment, the document root, or an element with no child content under the selector’s rules. |
How do interaction and focus pseudo-classes work?
Interaction pseudo-classes describe user input states. They can overlap: an element may match more than one state at a time, so avoid assuming that each is an exclusive step in a single sequence. :hover is pointer-oriented, while focus states matter for keyboard and other input methods.
/* Pointer is over the link */
a:hover { text-decoration-thickness: 0.15em; }
/* The link is being activated */
a:active { color: maroon; }
/* Keep an obvious indicator when focus should be visible */
a:focus-visible {
outline: 3px solid currentColor;
outline-offset: 3px;
}
/* Highlight a field container when one of its controls has focus */
.field:focus-within { border-color: steelblue; }:focus and :focus-visible
:focus matches an element that has input focus. :focus-visible matches when the browser determines a visible focus indicator should be drawn. In a typical interaction, tabbing to a link may show the focus ring, while clicking it with a pointer may not; browser logic determines when :focus-visible matches. Preserve a visible focus indicator for keyboard users rather than removing outlines without a replacement. MDN’s :focus-visible guide shows this approach and a fallback:
.button:focus-visible {
outline: 3px solid deepskyblue;
outline-offset: 3px;
}
@supports not selector(:focus-visible) {
.button:focus {
outline: 3px solid deepskyblue;
outline-offset: 3px;
}
}The fallback uses @supports not selector(:focus-visible) to apply focus styling when the selector is unsupported. MDN states that :focus has been available across browsers since July 2015; that date describes :focus, not every pseudo-class discussed here. See MDN’s :focus reference.
Rank #2
- 5-in-1 USB-C Hub: Experience comprehensive connectivity featuring a Power Delivery input, two USB-A 2.0 ports, a USB-A 3.0 port, and an HDMI port. (Note: The USB-C power delivery input port is only for connecting an external wall charger to power your laptop and cannot power peripheral devices.)
- 90W Pass-Through Charging: Achieve optimal charging with 90W pass-through power to your laptop, supported by a total input of 100W, with the hub reserving 10W for operational efficiency. (Note: Wall charger not included.)
- Quick Data Transfers: Accelerate your productivity with rapid data transfers using a high-speed 5Gbps USB 3.0 port and two 480Mbps USB 2.0 ports.
- 4K HDMI Display: Enhance your visual experience with a hub capable of delivering 4K resolution at 30Hz in both mirror and extend modes. Please note that this hub is compatible with MacBook (macOS 12 and newer), Windows 10 and 11, ChromeOS, and laptops equipped with DP Alt Mode and Power Delivery. Note: This device is not compatible with Linux.
- What You Get: Anker USB-C Hub (5-in-1, 4K HDMI), welcome guide, 18-month warranty, and our friendly customer service.
How do structural pseudo-classes count elements?
:first-child and :last-child count from the ends of the full sibling set. :first-of-type and :last-of-type first limit the set to siblings of the same element type. :nth-child() and :nth-last-child() select positions by counting from the start or end respectively. See MDN’s pseudo-class reference.
/* Every even list item */
li:nth-child(even) { background: #f5f5f5; }
/* First, fourth, seventh, and subsequent items: 3n + 1 */
li:nth-child(3n + 1) { font-weight: 700; }
/* First paragraph among paragraphs, even if another element comes first */
p:first-of-type { margin-top: 0; }Reading the An+B pattern
The formula An+B describes a repeating sequence of sibling positions: n takes successive non-negative integer values, and the expression gives the positions that match. For 3n + 1, the sequence is 1, 4, 7, and so on. The keywords even and odd are convenient patterns for alternating positions.
Count only matching siblings
Selectors Level 4 allows an of <selector-list> filter in :nth-child() and :nth-last-child(). For example, :nth-child(2 of .item) selects the second sibling that matches .item, rather than simply selecting the second child and then checking its class. This filtered form also affects specificity: the pseudo-class’s specificity is combined with the most specific selector in the filter. See the W3C specification.
Rank #3
- Sleek 7-in-1 USB-C Hub: Features an HDMI port, two USB-A 3.0 ports, and a USB-C data port, each providing 5Gbps transfer speeds. It also includes a USB-C PD input port for charging up to 100W and dual SD and TF card slots, all in a compact design.
- Flawless 4K@60Hz Video with HDMI: Delivers exceptional clarity and smoothness with its 4K@60Hz HDMI port, making it ideal for high-definition presentations and entertainment. (Note: Only the HDMI port supports video projection; the USB-C port is for data transfer only.)
- Double Up on Efficiency: The two USB-A 3.0 ports and a USB-C port support a fast 5Gbps data rate, significantly boosting your transfer speeds and improving productivity.
- Fast and Reliable 85W Charging: Offers high-capacity, speedy charging for laptops up to 85W, so you spend less time tethered to an outlet and more time being productive.
- What You Get: Anker USB-C Hub (7-in-1), welcome guide, 18-month warranty, and our friendly customer service.
How do form-state pseudo-classes work?
Form pseudo-classes reflect native control states and semantics. Use them when the browser already knows whether a control is checked, disabled, required, optional, valid, invalid, read-only, or still showing its placeholder, rather than duplicating that state in a class.
input:required:invalid { border-color: firebrick; }
input:required:valid { border-color: seagreen; }
input:disabled { opacity: 0.6; }
input:checked + label { font-weight: 700; }These rules change presentation; they do not replace accessible labels or helpful error messages. Do not communicate an error or checked state through color alone.
How can CSS match relationships and group selectors?
Logical pseudo-classes let you express alternatives, exclusions, and relationships without repeating whole rules. Their argument syntax and specificity can affect how easily later rules override them.
Rank #4
- Dual Converters, Infinite Potential：Includes 2× USB C male to USB A female adapters and 2× USB A male to USB C female adapters. Perfect for a wide range of uses—tablets with Bluetooth keyboards, expand USB ports on macbook, and more. Two different converters for all your daily needs
- Next-Level 10Gbps & 3A Charging: No more slow 480Mbps, this usb to usb c adapter has a transfer speed of up to 10Gbps, allowing you to do more transferring in less time. This usb adapter fits both USB A and USB C charger, supporting up to 3A fast charging
- Upgraded Exquisite Craftsmanship: With an aluminum alloy housing and metal connector, the usbc to usb adapter is extremely durable and sturdy. Rigorously tested to withstand more than 10,000 times of plugging and unplugging, ensuring long-lasting performance
- Broad Compatible: The usb c to usb adapter widely supports all USB C/ USB A devices like laptops, tablets, cellphones, car chargers, and phone chargers. Such as compatible with MacBook Pro/Air 2023/2022, Thunderbolt 4/3 Devices,Apple MagSafe Watch 9/8/7/SE/Ultra, iPad Pro 2022/2021, Samsung Galaxy S23/S20/S10, and iPhone 17/16/15 Pro. Plug and play
- Please Note: To reach 10Gbps speed, keep the cable under 3.3 ft. For USB A Male to USB C adapters, try flipping the USB C connector. USB C Male to USB A adapters support bidirectional 10Gbps transfer within 3.3 ft
:has(): match an element based on a relationship
:has() tests a relative selector against an anchor element. It can match a parent-like container based on a descendant or child, but it is not a generic parent selector for every possible relationship: the relative selector in its argument defines what relationship is tested. It cannot be nested inside another :has().
/* A card with a direct image child */
.card:has(> img) { display: grid; }
/* A section that contains a heading */
section:has(h2) { padding-block-start: 1rem; }
/* A link containing an image */
a:has(> img) { /* styles for that link */ }Check compatibility against the browsers your project supports before relying on modern selectors such as :has(). The MDN CSS selectors guide provides broader selector guidance; the reference material for this article does not establish a complete, date-stamped browser-version matrix for every modern selector.
:is(), :not(), and :where(): alternatives and exclusions
:is() matches an element that matches any selector in its argument list. :not() excludes elements that match its argument. :where() also groups alternatives, but its specificity is always zero, which can make shared styling easier to override.
Best Value
- 5-in-1 Connectivity: Equipped with a 4K HDMI port, a 5 Gbps USB-C data port, two 5 Gbps USB-A ports, and a USB C 100W PD-IN port. Note: The USB C 100W PD-IN port supports only charging and does not support data transfer devices such as headphones or speakers.
- Powerful Pass-Through Charging: Supports up to 85W pass-through charging so you can power up your laptop while you use the hub. Note: Pass-through charging requires a charger (not included). Note: To achieve full power for iPad, we recommend using a 45W wall charger.
- Transfer Files in Seconds: Move files to and from your laptop at speeds of up to 5 Gbps via the USB-C and USB-A data ports. Note: The USB C 5Gbps Data port does not support video output.
- HD Display: Connect to the HDMI port to stream or mirror content to an external monitor in resolutions of up to 4K@30Hz. Note: The USB-C ports do not support video output.
- What You Get: Anker 332 USB-C Hub (5-in-1), welcome guide, our worry-free 18-month warranty, and friendly customer service.
/* Match any of these heading elements */
:is(h1, h2, h3) { text-wrap: balance; }
/* Exclude muted elements */
button:not(.muted) { cursor: pointer; }
/* Group regions without increasing selector specificity */
:where(header, footer) :is(h2, h3) { line-height: 1.2; }What do :target, :root, and :empty match?
:target matches the element whose ID corresponds to the URL fragment, which can help identify the destination of an in-page link. :root matches the document root; in an HTML document this is normally <html>. :empty matches an element with no child content under the selector’s specification rules.
:target {
scroll-margin-top: 5rem;
background: #fff4c2;
}
:root { color-scheme: light dark; }How does pseudo-class specificity work?
A pseudo-class generally contributes class-level specificity. Functional pseudo-classes have important exceptions: :is(), :not(), and :has() take the specificity of the most specific selector in their argument list, rather than adding specificity as if each argument were an independent selector. :where() contributes zero specificity. With the filtered form of :nth-child() or :nth-last-child(), the selector list after of contributes its most specific selector in addition to the pseudo-class. These rules are defined by the W3C Selectors Level 4 specification.
- If a rule unexpectedly wins or loses, inspect the complete selector and the arguments to its functional pseudo-classes.
- Use
:where()for grouped selectors when you want the group not to make later overrides harder. - Keep selectors focused so it is clear which element is the anchor and which condition must match.
Or skip the browser setup
If your task is to capture how a page looks rather than style it, ScreenshotNeo can return a screenshot from one GET request. Cookie banners are accepted and removed before capture, along with known newsletter popups and chat widgets; those cleanup steps can be turned off. Bot checks, blank pages, failed loads, timeouts, and cache hits cost nothing, and response headers identify the page verdict and whether the request was billed. An MCP server provides take_screenshot, get_page_info, and capture_pdf tools for AI agents using Claude, Cursor, or another MCP client. The free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000 shots.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpSee the ScreenshotNeo API documentation for setup and options. Sign up for 1,000 free screenshots a month, with no card required.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
