Master CSS Selectors in Just 30 Minutes - Part 1 | Selectors in CSS - Part 1 | Parnika Tutorials
CSS Tutorial: Selectors in CSS - Part 1 | CSS Selectors | CSS Selectors Tutorial for Beginners | Parnika Tutorials
#externalstylesheet #cssfullcourse #csstutorial #cascadingstylesheets #csstutorials #csstutorialforbeginners #csscourse #learncss #parnikatutorials #selectors #selectorsincss
CSS selectors select the HTML elements for styling purpose.
They are used to select the HTML elements you want to style.
We can divide the CSS selectors into five categories.
1. Simple selectors
2. Combinator selectors.
3. Pseudo class selectors
4. Pseudo elements selectors
5. Attribute selectors
Simple selectors
The simple selectors select elements based on tag or element, id, class.
Tag based or element based selector:
The tag based selector selects the HTML element based on the tag name.
Tagname{ prop:value;prop:value;}
Id based selector:
The id selector uses the id attribute of an HTML element to select a specific element.
#one{prop:value;prop:value;}
The id of an element is unique with in a page, so that id selector is used to select one unique element.
To select an element with a specific id, write a Hash (#) character, followed by the id of the element.
Class based selector:
The class selector selects a HTML element with a specific class attribute .
. classname{ prop:value;prop:value;}
To select elements with a specific class, write a period (.) character followed by the classname.
Combinator selectors:
CSS combinators are explaining the relationship between two selectors.
It is a complex selector consisting of more than one selector connected using combinators.
There are four types of combinator selectors
1. descendent selector
2. child selector
3. adjacent selector
4. general sibling selector
Descendent selector (space):
This selector is used to select all the child elements of the specified tag.
The tags can be the direct child of the specified tag or can be very deep in the specified tag.
This combinator combines the two selectors such that selected elements have an ancestor same as the first selector element.
div p{prop:value;prop:value;}
child selector:
This selector is used to select the element that is the immediate child of the specified tag.
This combinator is stricter than the descendant selector because it selects only the second selector if it has the first selector element as its parent.
Adjacent sibling selector (+):
The Adjacent sibling selector is used to select the element that is adjacent or the element that is the next to the specified selector tag.
This combinator selects only one tag that is just next to the specified tag.
General sibling selector (~)
The general sibling selector is used to select the element that follows the first selector element and also share the same parent as the first selector element.
This can be used to select a group of elements that share the same parent element.
Social media Links:
Instagram: / parnikatutorials
Website: http://parnikatutorials.in/
Email id: [email protected]
To get the regular updates:
Telegram link: https://t.me/Parnikatutorials
Facebook: https://m.facebook.com/profile.php?id...
Linkedin: / parnika-tutorials-a8a9831b2
Pinterest: / parnikatutorials0892
Playlists:
Virtual Coffee with Jagadeesh:
• VIRTUAL COFFEE WITH JAGADEESH
Digital Logic Design:
• Digital Logic Design
Computer Organization and Architecture:
• ABOUT PARNIKA TUTORIALS
C Programming:
• L 1: WHAT IS AN ALGORITHM AND CHARACT...
Data Structures:
• L 1: Uncover the Benefits of Linked L...
Theory of Computation:
• ABOUT PARNIKA TUTORIALS
Compiler Design:
• ABOUT PARNIKA TUTORIALS
Operating Systems: • PROCESS STATE DIAGRAM | LONG TERM, SH...
Databases: • ABOUT PARNIKA TUTORIALS
Computer Networks:
• ABOUT PARNIKA TUTORIALS
For GATE PYQs and much more explore:
/ parnikatutorials
