CSS element1~element2 Selector Last Updated : 04 Jan, 2025 Comments Improve Suggest changes Like Article Like Report The general sibling selector (~) in CSS is a powerful combinator used to target elements that are siblings of a specified element and appear after it in the DOM tree. Unlike the adjacent sibling selector (+), which only targets the immediately following sibling, the general sibling selector applies to all matching siblings that come after the specified element.Syntaxelement1 ~ element2 { /* styles */}element1 is the reference sibling.element2 is styled if it appears after element1 within the same parent.1. Highlight All Siblings After a Clickable Element Use the general sibling selector to style elements that follow a specific clickable button or link. HTML <!--Driver Code Starts--> <html> <head> <!--Driver Code Ends--> <style> .child-btn:hover~.highlight { background-color: burlywood; font-size: 23px; color: white; font-family: sans-serif; font-weight: 900; } </style> <!--Driver Code Starts--> </head> <body> <div class="parent"> <button class="child-btn">Highlight All Below</button> <p class="highlight">Paragraph 1</p> <p class="highlight">Paragraph 2</p> <p class="highlight">Paragraph 3</p> </div> </body> </html> <!--Driver Code Ends--> 2. Applying accordion effect or toggle effect on any element Create a simple accordion menu where clicking one heading toggles the visibility of subsequent content. HTML <!--Driver Code Starts--> <html> <head> <!--Driver Code Ends--> <style> .accordion-content { display: none; } .accordion-heading:focus~.accordion-content { display: block; } </style> <!--Driver Code Starts--> </head> <body> <div class="accordion"> <h3 class="accordion-heading" tabindex="0">Section 1</h3> <p class="accordion-content">Content for section 1.</p> <h3 class="accordion-heading" tabindex="0">Section 2</h3> <p class="accordion-content">Content for section 2.</p> </div> </body> </html> <!--Driver Code Ends--> 3. Style Dynamic ListsApply styles to list items dynamically based on the position of a specific item. HTML <!--Driver Code Starts--> <html> <head> <!--Driver Code Ends--> <style> .start-point~li { color: red; font-weight: bold; } </style> <!--Driver Code Starts--> </head> <body> <ul class="dynamic-list"> <li>Item 1</li> <li class="start-point">Start styling here</li> <li>Item 3</li> <li>Item 4</li> </ul> </body> </html> <!--Driver Code Ends--> 4. Mark Required Fields After a Label Consecutive input fields after any label can be styled using general sibling selector. HTML <!--Driver Code Starts--> <html> <head> <!--Driver Code Ends--> <style> .required-label~.input-field { border: 2px solid red; } </style> <!--Driver Code Starts--> </head> <body> <div class="form"> <label class="required-label">Required Fields:</label> <input type="text" class="input-field" placeholder="Name"> <input type="email" class="input-field" placeholder="Email"> <input type="password" class="input-field" placeholder="Password"> </div> </body> </html> <!--Driver Code Ends--> 5. Style Notes or Warnings After a Heading The general sibling selector help's to style all the notes and warnings after a particular heading. HTML <!--Driver Code Starts--> <html> <head> <!--Driver Code Ends--> <style> h2~.note { border-left: 4px solid orange; padding-left: 10px; font-style: italic; } </style> <!--Driver Code Starts--> </head> <body> <div class="notes-section"> <h2>Important Information</h2> <p class="note">Note 1: Read the instructions carefully.</p> <p class="note">Note 2: Double-check your work.</p> </div> </body> </html> <!--Driver Code Ends--> 6. Styling inputs after a particular labelThe general sibling selector help's to style all the input's after a particular label. HTML <!--Driver Code Starts--> <html> <head> <!--Driver Code Ends--> <style> .main:focus~.one { outline: 3px solid red; } </style> <!--Driver Code Starts--> </head> <body> <label for="" class="main" tabindex="0">Click me to style input:</label> <input type="text" class="one"> <input type="text" class="one"> <input type="text" class="one"> </body> </html> <!--Driver Code Ends--> Comment More infoAdvertise with us K kundankumarjha Follow Improve Article Tags : Technical Scripter Web Technologies CSS Technical Scripter 2018 CSS-Selectors +1 More Similar Reads CSS [attribute*=value] Selector The [attribute*="str"] selector targets the elements whose attribute values contain a specified substring. This substring can appear anywhere within the attribute's value — beginning, end, or middle.Syntax:element [attribute*="str"] { // CSS Property} Example: In the following example, the <p> 2 min read CSS [attribute=value] Selector The [attribute=value] selector in CSS is used to select those elements whose attribute value is equal to "value".Syntax: element [attribute = "value"] { // CSS Property}Note: <!DOCTYPE> must be declared for IE8 and earlier versions.Example 1: In this example, The selector h1[id="geeks"] target 2 min read CSS [attribute$=value] Selector The [attribute$=â€valueâ€] selector is used to select those elements whose attribute value ends with a specified value "value". The value need not to be present as separate word. It may be a part of another word or expression but it needs to be present at the end. Syntax:[attribute$="value"] { // CSS 2 min read CSS [attribute|=value] Selector The [attribute|=value] selector is used to select those elements whose attribute value is equal to "value" or whose attribute value started with "value" immediately followed by a hyphen (-).Note: Use <!DOCTYPE> to run [attribute|=value] selector in IE8 or earlier versions.Syntax:[attributeType 2 min read CSS [attribute~=value] Selector The [attribute~="value"] selector is used to select those elements whose attribute value contains a specified word. The "value" must be present in the attribute as a separate word and not as part of the other word i.e. if [title~=Geeks] is specified then all elements with Geeks title get selected.Sy 2 min read CSS [attribute^=value] Selector The [attribute^=value] selector selects elements whose attribute value begins with a given attribute.Syntax:[attribute^=value] { // CSS Property}Example: In this example, The CSS selector p[class^="for"] targets <p> elements with a class attribute that starts with "for" and applies a green bac 2 min read CSS #id Selector The ID selector in CSS is used to select a single element on a page by referencing its id attribute. This attribute must be unique within a page, meaning no two elements can have the same id. The ID selector is prefixed with a hash (#) symbol in CSS.Basic ID SelectorThe ID selector allows you to sty 7 min read CSS * (Universal) Selector The universal selector (*) applies styles to all elements on a page or within a specified context, regardless of their type, class, or ID. It's commonly used for global resets or universal styling. * { /* styles */}1. Basic Use case of universal selectorThe universal selector applies styles to all e 4 min read CSS :active Selector The: active selector is used in styling an active link of the web page. Style display when the user clicks on the link. This selector is different from :link, :visited and: hover selectors. The main use of : active selector is on the links but it can be used on all elements.Syntax: :active{ //CSS pr 2 min read CSS ::after Selector ::after selector is used to add the same content multiple times after the content of other elements. This selector is the same as ::before selector. Syntax:::after{ content:}Below HTMl/CSS code shows the functionality of ::after selector : HTML <!DOCTYPE html> <html> <head> <sty 2 min read Like