Combining css selector
Descendant selector: It targets elements that are descendants of another element. It uses a space between selectors. For example,
div p
selects all<p>
elements that are descendants of<div>
elements.Child selector: It targets direct child elements. It uses the
>
symbol between selectors. For example,ul > li
selects all<li>
elements that are direct children of<ul>
elements.Adjacent sibling selector: It targets an element that directly follows another element. It uses the
+
symbol between selectors. For example,h2 + p
selects the<p>
element that directly follows an<h2>
element.General sibling selector: It targets elements that follow another element, regardless of their position. It uses the
~
symbol between selectors. For example,h2 ~ p
selects all<p>
elements that follow an<h2>
element.Grouping selector: It combines multiple selectors into a single rule. Selectors are separated by commas. For example,
h1, h2, h3
selects all<h1>
,<h2>
, and<h3>
elements.Attribute selector: It selects elements based on their attributes. For example,
[type="text"]
selects all elements with the attributetype
equal to"text"
.
These are just a few examples of how selectors can be combined in CSS. By using combinations of selectors, you can precisely target specific elements or groups of elements on a web page.
Subscribe to my newsletter
Read articles from Vaishnav Srivastava directly inside your inbox. Subscribe to the newsletter, and don't miss out.
Written by