
~
) is your go-to tool in CSS.

What does the ~
selector do?
<p> The general sibling combiner selects all elements that are siblings of a specified element and appear after it in the document tree. These elements must share the same parent.
<p> For example:

h2 ~ p { color: red; }<p> This rule will apply red text color to all
<p>
elements that come after an <h2>
tag within the same parent container.<p> Important: The~
doesn't care how far after — as long as the element comes later in the markup and shares the same parent, it matches.
When should you use ~
instead of
?
<p> You might be familiar with the adjacent sibling combiner (
), which only targets the very next sibling.<p> Use ~
when:- You want to target multiple siblings , not just one.
- The targeted elements may be spaced out by other elements.
- You're applying styles like spacing, color changes, or transitions across several related items.
/* Only the paragraph immediately after h2 */ h2 p { font-weight: bold; } /* All paragraphs after h2, even if others are between them */ h2 ~ p { color: blue; }<p> So if you have this HTML:
<h2>Title</h2> <p>First paragraph</p> <p>Second paragraph</p><p> Then both paragraphs get blue text from the
~
, but only the first gets bold from the
. Practical use cases for the ~
selector
<p> Here are some real-world situations where the general sibling combiner shines:- <p> Styling form elements conditionally : For example, highlighting input fields that come after a required label.
label.required ~ input { border-color: red; }
- <p> Toggling content via checkboxes : Using hidden checkboxes to control visibility of unrelated sibling elements (like dropdowns or panels).
input[type="checkbox"]:checked ~ .panel { display: block; }
- <p> Alternate styling in lists or sections : If you're working with dynamic content and want every item after the first to look different.
.item:first-child ~ .item { opacity: 0.7; }
<p> These examples don't require JavaScript and keep logic purely in CSS — handy for lightweight interaction.
Keep these gotchas in mind
- It only works on same-level siblings — no nesting or parents involved.
- Order matters — the selector must come after the reference element in the HTML.
- It's not widely used, so team members unfamiliar with it may overlook or misunderstand its function during maintenance.
<p> It's a subtle but powerful part of CSS that helps you write cleaner, more context-aware rules without extra classes or JavaScript. Once you understand how it behaves, you'll find more places where it makes sense to use it.The above is the detailed content of Describe the general sibling combinator (`~`). For more information, please follow other related articles on the PHP Chinese website!

Hot AI Tools

Undress AI Tool
Undress images for free

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

The settings.json file is located in the user-level or workspace-level path and is used to customize VSCode settings. 1. User-level path: Windows is C:\Users\\AppData\Roaming\Code\User\settings.json, macOS is /Users//Library/ApplicationSupport/Code/User/settings.json, Linux is /home//.config/Code/User/settings.json; 2. Workspace-level path: .vscode/settings in the project root directory

To correctly handle JDBC transactions, you must first turn off the automatic commit mode, then perform multiple operations, and finally commit or rollback according to the results; 1. Call conn.setAutoCommit(false) to start the transaction; 2. Execute multiple SQL operations, such as INSERT and UPDATE; 3. Call conn.commit() if all operations are successful, and call conn.rollback() if an exception occurs to ensure data consistency; at the same time, try-with-resources should be used to manage resources, properly handle exceptions and close connections to avoid connection leakage; in addition, it is recommended to use connection pools and set save points to achieve partial rollback, and keep transactions as short as possible to improve performance.

DependencyInjection(DI)isadesignpatternwhereobjectsreceivedependenciesexternally,promotingloosecouplingandeasiertestingthroughconstructor,setter,orfieldinjection.2.SpringFrameworkusesannotationslike@Component,@Service,and@AutowiredwithJava-basedconfi

itertools.combinations is used to generate all non-repetitive combinations (order irrelevant) that selects a specified number of elements from the iterable object. Its usage includes: 1. Select 2 element combinations from the list, such as ('A','B'), ('A','C'), etc., to avoid repeated order; 2. Take 3 character combinations of strings, such as "abc" and "abd", which are suitable for subsequence generation; 3. Find the combinations where the sum of two numbers is equal to the target value, such as 1 5=6, simplify the double loop logic; the difference between combinations and arrangement lies in whether the order is important, combinations regard AB and BA as the same, while permutations are regarded as different;

Python is an efficient tool to implement ETL processes. 1. Data extraction: Data can be extracted from databases, APIs, files and other sources through pandas, sqlalchemy, requests and other libraries; 2. Data conversion: Use pandas for cleaning, type conversion, association, aggregation and other operations to ensure data quality and optimize performance; 3. Data loading: Use pandas' to_sql method or cloud platform SDK to write data to the target system, pay attention to writing methods and batch processing; 4. Tool recommendations: Airflow, Dagster, Prefect are used for process scheduling and management, combining log alarms and virtual environments to improve stability and maintainability.

fixture is a function used to provide preset environment or data for tests. 1. Use the @pytest.fixture decorator to define fixture; 2. Inject fixture in parameter form in the test function; 3. Execute setup before yield, and then teardown; 4. Control scope through scope parameters, such as function, module, etc.; 5. Place the shared fixture in conftest.py to achieve cross-file sharing, thereby improving the maintainability and reusability of tests.

TheJVMenablesJava’s"writeonce,runanywhere"capabilitybyexecutingbytecodethroughfourmaincomponents:1.TheClassLoaderSubsystemloads,links,andinitializes.classfilesusingbootstrap,extension,andapplicationclassloaders,ensuringsecureandlazyclassloa

Use classes in the java.time package to replace the old Date and Calendar classes; 2. Get the current date and time through LocalDate, LocalDateTime and LocalTime; 3. Create a specific date and time using the of() method; 4. Use the plus/minus method to immutably increase and decrease the time; 5. Use ZonedDateTime and ZoneId to process the time zone; 6. Format and parse date strings through DateTimeFormatter; 7. Use Instant to be compatible with the old date types when necessary; date processing in modern Java should give priority to using java.timeAPI, which provides clear, immutable and linear
