CSS
SELECTORS
WHAT IS A CSS
SELECTOR?
It is a pattern of elements and other terms that tell
the browser which HTML elements should be
selected to have the CSS property values inside the
rule applied to them
WHAT IS THE USE OF
CSS SELECTORS?
TYPES OF
SELECTORS
1. Basic selectors (select elements based on name, id, class)
2. Combination selectors
3. pseudo Selector
Basic selectors
the Basic selectors
Combinator
selectors
the Descendant Selectors can be any
selector having the white-space in
between the elements without using
any combinators.
parent particular_child {
properties: values;
}
in real example
div p{
properties: values;
}
difference between the
descendant and child selector
the Descendant Selectors will select any element inside
an element or tag that is contained in another tag, while
Child selector selects all the elements in a particular
element that are directly under it not contained in another
tag(represented with a >).
Adjacent selectors(+)
These are selectors that come immediately after an
element closing tag
general siblings(~)
These are selectors that come immediately after a parent
closing tag
Pseudo Class
A pseudo-class is used to define a special state of an
element. for example when an element is hovered on or
when it is clicked
Pseudo Class
1.
2.
3.
4.
Examples of Pseudo Class
:link: unvisited link
:visited
:hover
:focus
Pseudo Elements
Pseudo Elements are selectors used to add a style to the
portion of an element
Pseudo Elements
1.
2.
3.
4.
5.
6.
Examples of Pseudo Class
::first-letter
::selection
::before
::before
::first-letter
::marker: works with lists