Complete CSS from Basic to Advance | CSS Functions | CSS Contains | CSS Siblings

CSS :-
Into :(0:00)
CSS Basics :(1:37)
CSS by any attribute :(9:33)
Parent, Child, Descendant:(13:34)
Partial Match | Case insensitive :(20:01)
Using Index :(27:16)
Only-of-type :(30:35)
Child Methods :(32:10)

Practice page :- https://theautomationzone.blogspot.com/2020/07/css-selector-practice.html

#=ID - Find Element by it's ID
.=Class - Find Element by its class
Tag - just the tag name

Tag#ID - Tag having an ID
Tag.Class - Tag having a class

Tag[attr=value] - General syntax
Tag[id=value]
Tag[class=value]
Tag[name=value]

Node Node - Moving from parent node to descendant node
Node %gt Node - Moving from parent node to child node

Tag[attr=value] &gt Tag[attr=value]

input[id^='ema'] - Starts with
input[id$='mail'] - Ends with
css=input[id*='mai'] - Contains
[attr operator value i] - case insensitive

A ~ B - following sibling
A + B - directly following sibling
A || B - combinator selects nodes which belong to a column

Multiple Attribute Matches ( No Space )
Tag[attr1=value1][attr2=value2]...

https://www.w3schools.com/cssref/css_selectors.asp

Functions in CSS
================

a:active all active links
a:visited will match all a elements that have been visited by the user.
a:link
a:hover

input:checked Selects every checked input element
input:disabled Selects every disabled input element
p:first-child Selects every p element that is the first child of its parent
p::first-letter Selects the first letter of every p element
p::first-line Selects the first line of every p element
p:first-of-type Selects every p element that is the first p element of its parent
input:focus Selects the input element which has focus
p:last-child
p:last-of-type
p:nth-child(2) Selects every p element that is the second child of its parent
p:nth-last-child(2) Selects every p element that is the second child of its parent, counting from the last child
p:nth-last-of-type(2) Selects every p element that is the second p element of its parent, counting from the last child
p:nth-of-type(2) Selects every p element that is the second p element of its parent
p:only-of-type Selects every p element that is the only p element of its parent
p:only-child Selects every p element that is the only child of its parent

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors