css selectors--- div>p, div+p, attribute selector, nth child selector, before and after selector

CSS selectors

we can select by 

1 tag

2 class

3 id

4 using combinations

example

div p{

            color: rgb(0, 0, 128);

            background-color:orange;

            font-weight: bold;

        }

now other selectors are :

div > p 

this will target the direct child of div.

div+p

this will target the next child of div.

Attribute & nth child pseudo Selectors

we can target elements using attributes like

input [type] will select all input having attribute type

input [type="text"] will select all attributes having type ="text"

we can select using nth attribute

li:nth-child(2n+0){}

li:nth-child(3n+0){}

li:nth-child(even){}

li:nth-child(odd){}

Before and After Pseudo Selectors

this will include a content before or after the selected object

      section::after{
        content:"this is a content"
    } 

header::before{
            background: url('https://source.unsplash.com/collection/190727/1600x900') no-repeat center center/cover;
            content: "";
            position: absolute;
            top:0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            opacity: 0.3;
        }

this is mainly used to add background image to the body