How to use grid area to create grid layout
grid area is an important part of the grid. It helps us to create layouts easily while writing less code. Grid is used to create a 2d layout with the help of…
Top 10 Best CSS Selectors, every frontend developer must know
CSS selectors enable developers to apply styles to specific elements more efficiently, making the styling process less cumbersome and more organized. In this article, we will explore some of the most useful advanced CSS selectors that developers can use to enhance their web pages.
Basic CSS selectors
CSS selectors are used to select HTML elements or groups of elements and apply CSS on the selected nodes or elements. Mostly there are three types of CSS selectors
- Class selector
- Id selector
- tag name selector
Advanced CSS selectors
The above are just basic selectors but when you have complex designs then you will need some advanced types of selectors, let’s know what are other advanced CSS selectors
- Child selector (div p)
- general sibling selector (.main ~ button )
- attributes selector ( [class*=”active”] )
- Pseudo selectors (:hover,:active,:last-child,:first-child, :not,:where)
- Descendent selector (div>p)
- Adjacent sibling selector (sibling1 + sibling 2)
- Universal selector (*)
Here is the list of CSS selectors with syntax and their meaning which will be useful for every frontend developer and web designer.
| Selector | Example | Description |
|---|---|---|
| Element Selector | p | Selects all instances of the specified HTML element. |
| Class Selector | .example-class | Selects all instances of elements with the specified class. |
| ID Selector | #example-id | Selects a single instance of an element with the specified ID. |
| Descendant Selector | .container p | Selects all instances of the specified HTML element that are descendants of the specified parent element. |
| Child Selector | .nav > li | Selects all instances of the specified HTML element that are direct children of the specified parent element. |
| Adjacent Sibling Selector | h2 + p | Selects the first instance of the specified HTML element that immediately follows the specified sibling element. |
| General Sibling Selector | h2 ~ p | Selects all instances of the specified HTML element that follow the specified sibling element. |
| Attribute Selector | input[type="text"] | Selects all instances of the specified HTML element that have the specified attribute and value. |
| Pseudo-Class Selector | a:hover | Selects an element when a user hovers over it. |
| Pseudo-Element Selector | p::first-letter | Selects a specific part of an element’s content, such as the first letter. |
Now let’s know them one by one in detail
Descendant Selector
The descendant selector is an incredibly useful CSS selectors that targets all elements that are descendants of a specified element. The syntax for this selector is simply the space between two selectors. For example, if we want to target all paragraphs inside a div with the class of “container,” we can use the following CSS rule:
.container p {
/* CSS rules here */
}
In the above example, the descendant selector is used to select all p elements that are descendants of an element with the class of “container.” This selector is particularly useful for applying styles to specific elements within a container without affecting the other elements outside of it.
Child selector
child CSS selectors are used to select children elements of an element. for example, if you want to select all p tags inside a div with the class name “post” then children will be selected with
.post pThis CSS selector selects all p children, if you want to select every child of the post you can use a wild card selector.
.post > * { }The child selector is similar to the descendant selector but targets only direct children of a specified element. The syntax for the child selector is the > symbol. For example, if we want to target all li elements that are direct children of an ul element with the class “nav,” we can use the following CSS rule:
General sibling selector
This is the most powerful selector. Most of the time when you have no solution to select a tag there always remains a possibility that we can select that with the general sibling selector. The general sibling selector selects all sibling elements of that element
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.post>.readmore~button {
background: red;
padding:10px;
border:none;
outline:none
}
</style>
</head>
<body>
<div class="main">
<div class="post">
<button class="readmore">read more</button>
<button>read more1</button>
<button>read more2</button>
<button>read more3</button>
</div>
</div>
</body>
</html>The general sibling selector is a CSS selector that targets any element that comes after another element, provided that they share the same parent element. The syntax for this selector is the ~ symbol. For example, if we want to target all p elements that come after a h2 element, we can use the following CSS rule:
h2 ~ p {
/* CSS rules here */
}
In the above example, the general sibling CSS selectors are used to select all p elements that come after the h2 element. This selector is particularly useful for selecting a group of elements that follow a specific element, without worrying about their order.
Attribute selector
HTML element can also be selected based on its attribute whether it’s a default or custom attribute. using this selector you can select an HTML element by its attribute.
syntax of attribute selector
[attribute="attribute-value"]{
}example
[class*="col"]{
padding:-15px
}some of the advanced methods of attribute selectors
- [class*=”col”]
attribute value has a “col” word somewhere example :<div class="col-md-4"></div> - [class^=”col-12″]
attribute value has a “col” word in starting example :<div class="col-12 col-md-4"></div> - [class$=”col”]
class tribute has the value “col-12” word at the end
example :<div class="col-md-4col-12"></div> - [class=”col”]
the attribute value is exactly “col”
example<div class="col"></div>
Adjacent sibling selector
An adjacent sibling selector is used to select just the next sibling to the element, for example, I have three buttons and want to select the button just after the saving button
<div class="post">
<button>save</button>
<button>updated</button>
<button>delete</button>
</div>
<style>
.post button:first-child+button{color:red}
</style>The adjacent sibling selector is a CSS selector that targets an element that immediately follows another element, provided that they share the same parent element. The syntax for this selector is the + symbol. For example, if we want to target the first p element that immediately follows an h2 element, we can use the following CSS rule:
h2 + p {
/* CSS rules here */
}
Pseudo Selector
The Pseudo selector is the next most powerful selector which solved many css problems to select the difficult selectable element. Types of pseudo selectors
- :not()
not is used to ignore the element between the selection of elements like children or other selectors
for example, I want to ignore 3rd child on a list thenul li:not(:nth-of-type(3)){color:red} - :focus-within – this selector gives us the power to select the parent of a focusable element
we can select the parent element and can style it. for example,I want to change the background of the form when focused on the email inputinput[type="email"]:focus-within{background:green} - :empty()
we can use an empty() pseudo selector for selecting an empty element ( the element which has no child or text). - : after and: before
These are the two selectors which are most useful in creating short pseudo-elements of design like corners, caret, borders, overlays,s, etc
css selector and condition
if you cleverly use the CSS selector you can add conditions also. for example, if you want to select a div which are not empty then by combining: not and: empty() CSS selector
div:not(:empty()){ //add your css here }
Note that this is just a small selection of the many CSS selectors available. Each selector can be combined with others to create more complex selection patterns.
Other CSS selectors
Till now we have seen some standard selectors but apart from theme standard selectors, more selectors can be generated by combining two selectors for example-
ul li:not(:last-child)Just like above as we have used a child selector & pseudo css selectors (:last-child &: not()). So in this way, you can use CSS selectors in HTML.
CSS selector for the previous sibling
There are no CSS selectors to select the previous sibling in CSS.
Although you can use a trick to select the previous siblings using: a focus-within css selector to target the input parent and then based on the parent you can target its child element.
<div class="box">
<p> slelect this previous sibling </p>
<input type="text"/>
</div>
<style>
.box:focus-within p{color:red}
</style>slelect this previous sibling
css selectors by class
you can use the class selector to select an element by its class name
<div class="box"></div>
<style>
.box{}
</style>advanced CSS selectors are a powerful tool for web developers to target specific elements within a web page. By using the descendant selector, child selector, adjacent sibling selector, and general sibling selector, developers can apply styles to specific elements more efficiently and in a more organized way.
While these are just a few examples of the many advanced CSS selectors available, mastering them can significantly enhance a developer’s ability to create visually appealing and engaging web pages
About Author
Ashish Yadav
Software Engineer Follow
Software Engineer Follow
Ashish Yadav is a passionate Software Engineer and technology enthusiast having 3 years of experience in web development with a deep interest in the ever-evolving world of technology.
With a background in computer science and extensive experience in software development, Ashish brings a unique perspective to his writing in the tech blogosphere & love to learn and work on technologies
HTML5CSS3javascriptreact jsRedux.jswordpressNext jsSEOexpress js node jsmongodb
Whatsapp Group
Frontend developerwhatsapp group
