Day 4 : CSS

1. CSS Selectors

a. Type Selector

Select elements by their type

b. ID Selector

Select elements by their ID

c. Descendent Selector

Select an element inside another element

p strong{...} => all <strong> elements within the <p> tag
.fruits li{...} => all <li> elements within the fruits class

d. Class Selector

Select elements by their class

e. Combining the Class Selector

You can combine the class selector with other selectors

ul.fruit => all ul elements with the fruit class
#post.fruit => all elements of ID post with the fruit class

f. Comma Combinator

You can list multiple selectors with commas

p, div, .fruit{..} => all elements with <p>, <div> tags or
                      the fruit class

g. The Universal Selector

You can select everything using *

h. Combining the Universal Selector

@@@ * selects all elements within the @@@ element

.fruit *{...} => all elements within the elements with fruit tag

i. Adjacent Sibling Selector (A+B)

This selects all B elements that directly follow the A element

.fruit+li => all the <li>s that come right after the .fruit class

j. General Sibling Selector (A~B)

This selects all B elements that follow the A element

.fruit~li => all the <li>s following the .fruit class

k. Child Selector (A>B)

This selects the elements of B type that are directly within A

l. First Child Pseudo-Selector (A B:first-child)

This selects All first child elements of type B in A

m. Only Child Pseudo-Selector (A B:only-child)

This selects All the only child elements of type B in A

n. Last Child Pseudo-Selector(A B:last-child)

This selects All last child elements of type B in A

o. Nth Child Pseudo-selector(A B:nth-child(C))

This selects the Cth child elements of type B in A

p. Nth Last Child Selector(A B:nth-last-child(C))

This selects the Cth child elements from the back
of type B in A

q. First of Type Selector(A B:first-of-type)

This selects the first element of type B in A

r. Nth of Type Selector(A B:nth-of-type(C))

This selects the Cth element of type B in A
C can be odd or even

s. Nth of Type Selector with Formula

The C is replaced with An+B

li:nth-of-type(2n+3)

t. Only of Type Selector(A B:only-of-type)

This selects the B element if it's the only B in A

u. Last of Type Selector(A B:last-of-type)

This selects all the last element of type B in A

v. Empty Selector(A:empty)

This selects all the A elements that dont have children

w. Negation Pseudo-class(A:not(B))

This selects all A that is not B
There can be multiple Bs

x. Attribute Selector

This selects all elements that have a certain attribute

a[href], [type]

You can have a value for the attribute

a[type="checkbox"]

You can Specify what the value starts with

a[type^="AB"]

You can Specify what the value ends with

a[type$="AB"]

You can Specify what the value contains

a[type*="AB"]