So you have learned the basic id, class, and descendant selectors—and then called it a day? If so, you're missing out on an enormous level of flexibility. You owe it to yourself to commit these advanced CSS and CSS3 selectors to memory CSS Rules Every CSS rule follows this general pattern selector {
	property : value ;
} where we have a selector (e.g. h1) and a declaration block ({}) where we declare our styles. In understanding CSS The biggest key player is understanding selectors and how they work, CSS selectors are what allows us to target specific Html Elements and apply styles in the declaration block to them, we won't be focusing on styles right now though, our focus would be on the selecting and what goes in that selector area Let's get into it 👇 1. Universal Selector Selects everything /* Selects all elements */
* {
	color : black ;
} The CSS universal selector is donated by an asterisk ✳. It selects all elements regardless of their type present on the page. In the example above all elements on the page will get the style of assuming we don't have any more specific selectors that conflict with that. color: black; 2. Element (Type) Selector /* Selects all img */
img {
	width: 200px;
	height: 100px ;
} The Selector Selects all instances of a tag or element present on the page, in our case, we would be giving all HTML elements on the page the specified width and height. Element img 3. Class Selector /* Selects all elements with class of 'blue' */
.blue {
	border: blue 2px dotted ;
	background-color: white;
	color: blue;
} The CSS selector is probably the most useful and versatile selector, it selects all elements that have given the in their attribute. In the example above it will select all elements that have the "blue" value in their attribute class class value class class 4. ID Selector /* Selects the element with the id attribute set to '#header' */
#header {
	border: blue 2px dotted ;
	width: 200px;
	height: 100px ;
} Next, we have the selector. ID selectors are the most powerful in terms of , just like the selector, it targets specific elements in our markup, that we can then reference in our CSS. ID CSS specificity class Note: The value of an element's must be unique on a web page. It is a violation of the to use the value of an ID more than once in the same document tree. id selectors are rigid and don't allow for reuse ID HTML standard 5. Selector List /* Selects all matching elements in the list */
span, div, p {
	text-align: center;
	color: rgb(0, 0, 0)
} The CSS allows us to select multiple elements with at once and style them. You have more than one thing which uses the same CSS then the individual selectors can be combined into a selector list so that the rule is applied to all of the individual selectors. This is done by grouping them in a comma-separated list and CSS selects all the matching elements in the list selector list (,) different selectors Note:  When you group selectors in this way, if any selector is invalid the whole rule will be ignored. <h1><u> Combinator Selectors </u></h1> This final group of selectors combines other selectors in order to target elements within our documents 6. Descendant Combinator /* Selects all <a>'s that are nested inside an <ul> */
ul a{
	text-decoration: none;
	color: dodgerblue;
} This allows us to select elements that are descendants of some other selector. selector we are selecting all nested anywhere within an , it doesn't have to be the first child or first descendant it can be  anywhere nested inside the <a> <ul> ul 7. Adjacent Sibling Combinator /* Selects only <p> tags that are immediately preceded by a <h1> */
h1 + p{
	color: dark-grey;
} The + combinator selects adjacent element siblings. It will select only the element that is immediately preceded by the former element. In this case, only the first paragraph after each will have dark-grey text. This means that the second element must directly follow the first, and both share the same parent. 8. (Direct) Child Combinator /* Selects all <h2> that are direct children of a <div> */
div > h2{
	color: white;
} The combinator acts more like the expect that it is more particular and selects direct children of the parent element, in the Example: will match all elements that are nested directly inside of a . > descendant combinator div > h2 <h2> <div> With the we would select any nested child or grandchild of the parent element. But the child combinator selects only direct children. descendant combinator > Sorry grandchildren only children allowed 😋. Attribute Selectors The attribute selectors allow us to select elements based on the presence of a certain attribute on an element: 9. X[href="foo"] a[href="https://hashnode.com/"] {
  color: blue; 
} The snippet above will style all anchor tags which link to they'll receive the blue color. All other anchor tags will remain unaffected. https://hashnode.com/; What if the link does indeed direct to Hashnode, but maybe the path is rather than the full URL? hashnode.com 10. X[href*="foo"] a[href*="hashnode"] {
   color: blue; 
} There we go. The star designates that the proceeding value must appear somewhere in the attribute's value 11. X[href^="HTTP"] a[href^="http"] {
   text-decoration: 1px solid blue;
   padding-left: 10px;
} the carat symbol designates the beginning of a string. If we want to target all anchor tags that have an href which begins with http, we could use a selector similar to the snippet shown above. ^ 12. X[href$=".jpg"] a[href$=".jpg"] {
   color: red;
} the symbol refers to the end of a string. In this case, we're searching for all anchors which link to an image—or a URL that ends with .jpg. $ Conclusion Alright coder we have covered quite a bit about CSS selectors! 🎉. Universal Selector Element (Type) Selector Class and ID Selectors Combinators Adjacent, Descendant, and Direct Child Combinators Attribute Selectors and their variants. In the next part of this series, we are going to talk about , a big and widely confusing topic in CSS 🤔. Pseudo Selectors So what are you waiting for, take this knowledge out there and go write some top-notch CSS styles that will impress your friends. ? 😍 . 😃 Enjoyed reading this as much as I enjoyed writing it for you Buy Me a coffee ☕ Thanks so much for reading! 💖 And keep on coding! 👨‍💻.

Mozilla

Target

Read My Stories

Too Long; Didn't Read

Make resilience your competitive advantage

Top 12 CSS Selectors You Should Know

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

100 Days of AI Day 1: From Newsletter to Podcast, Leveraging AI for Audio Transformation

10 Tips For Junior Developers To Succeed in Code

25 Useful Websites Developers Don't Use Enough

17 Most Popular Tools For React Developers

3 Key Questions You Need To Answer Before You Push That Code

100 Days of AI Day 1: From Newsletter to Podcast, Leveraging AI for Audio Transformation

10 Tips For Junior Developers To Succeed in Code

25 Useful Websites Developers Don't Use Enough

17 Most Popular Tools For React Developers

3 Key Questions You Need To Answer Before You Push That Code

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps