CSS Selectors
CSS selectors define the pattern to select elements to which a set of CSS rules are then applied. -MDN docs
CSS selectors are patterns that are used to select specific HTML content that you want to style.
Why do we need CSS selectors?
Inline CSS can be applied to a specific element by using a style attribute with any CSS properties defined inside the style attribute. eg.
<h1 style="text-align:center; color: blueviolet;">Input Types</h1>
<p style="color:red;">Reserch on Audio and Video tag </p>
here CSS is applied directly to specific elements & others elements in HTML won't be affected.
But what if there is a need to apply the same CSS properties to all h1 and p tags in the document?
Of course, you won't be applying style attributes to all h1 and p tags one by one! right? It can be achieved by using selectors in Internal CSS or in external CSS.
To apply the background color gray to all paragraphs, the p element selector is used.
<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>
p{
background-color: rgb(119, 117, 117);
}
</style>
</head>
Based on the type of elements the selectors can select, they are grouped and classified into 4 categories.
1. Basic selectors
Basic selectors select elements based on name, id, and class
1. Universal selector
Syntax
* { CSS properties }Example
* { margin : 0px; padding : 0px; }- Selects all elements and CSS defined inside it is applied to all elements.
- "*" is used for selecting all elements.
- Generally used for overriding default CSS rules.
2. Type selector or Individual selector
Syntax
element { style properties }
Example
p{ background-color: rgb(119, 117, 117); }- Selects all elements of the given type.
3. Class selector
Syntax
.classname { CSS properties }
Example
<head> <style> .red{ color: #f33; } </style> </head> <body> <p class="red">This paragraph has red text.</p> </body>select all HTML elements that have given class attributes.
p tag with the class attribute as red will have text color of red.
4. ID selector
Syntax
#idname{ CSS properties }
Example
<head> <style> #red{ color: #f33; } </style> </head> <body> <p id="red">This paragraph has red text.</p> </body>- ID is specific to the element. ID selector will apply CSS to the element which has given ID attribute.
5. Demo for universal, type, class, & ID selector:
2. Grouping selectors
- basic selectors separated by
,also known as Selector list.
Combined selector or Selector list
Syntax
element 1, element2, element3 .. { CSS properties }
Example
- The
,selector selects multiple elements and applies the same style properties to selected elements.
3. Combinators
- select elements based on a specific relationship between them.
There are different ways of combining CSS selectors.
1. Chained selector or and selector:
Syntax
.classname1.classname2.classname3... { CSS properties }
Example
- Style properties defined in
.background.descriptionchained selector is applied to 1st<p>tag only because it has both the classes. On the other hand, the 2nd p tag has only a background class. - Notice, there is no space " " between two class selectors.
2. Descendant combinator (inside an element)
Syntax
A B C...{ CSS properties } or element 1 element2 .classname1.classname2 #id1... { CSS properties }
Example
- In the above example,
div ul .bg-black.text-whitemeans apply CSS properties on elements which have.bg-black.text-whiteboth the classes (noticeand selectorbecause no spaces between classes) which is inside ul element and the same ul element must be inside the div element.
3. Child combinator
Syntax
A > B > C... { CSS properties }Example
- Child combinator uses greater than symbol
>to combine selectors. - It selects only those elements which are direct children of 1st element.
- In the above example, 1s unordered list's
ulis direct child of div tag andliwith classbg-blackis direct child of thatul. That's why onlyitem2has CSS properties applied to it and notitem7.
4. General sibling combinator
Syntax
former_element ~ target_element { style properties }
Example
- as shown in the example, there can be multiple formal elements, one target element, and all are siblings i.e. have the same parent element.
- all target element that matches the sequence of former elements will be selected. target_element doesn't have to be immediately after formaer_element.
5. Adjacent sibling combinator
Syntax
former_element + next_sibling_element { style properties }
Example
- Next sibling selector combines selectors with a plus sign
+. The second element has to be immediately after the first element and are siblings i.e. same parent element.
- Style properties defined in
4. Pseudo-classes
- Pseudo-class in CSS is a keyword added to the selector, & based on this word selected element(s) has a special state.
- Pseudo-class selectors are CSS selectors with a colon preceding them.
Syntax
selector:pseudo-class { CSS properties}
Pseudo-class selectors can be used to change the style of the link when visited or if it's in an inactive state or apply a different style to the element when the mouse pointer comes over it.
Let's see two examples of Pseudo class selectors hover & visited:
.circle:hoverelements which have a class circle when hovered i.e. when the mouse points over that element will have a different style applied to it.a:visitedif the link is visited in the current browser then that link will have pink color.
5. Pseudo-elements
- To apply style on a specific part of the selected element(s), after CSS selector double colon and keyword is added. This keyword is pseudo-element.
Syntax
selector::pseudo-element { property: value; }
- Let's see
::before&::afterpseudo elements to understand them better. - in both the pseudo-elements
contentproperty is used to add cosmetic content to an element. - in case of
::before:🔗Link:content appears before each anchor tag. - in case of
::after: visited link text with href value appears after each anchor tag.
Useful resources/ articles: