w3schools css selectors code example

Example 1: child css

p:nth-child(2)
 	{     
 		background: red;
 	}

Example 2: css selectors

* {
color: pink;
}
h1, h2 {Select all h1 and h2}
li a {select all anchor inside a list}
h1 + p {select all p placed after an h1}
div > li {all li directly in a div}

Example 3: css how to style id

/*put a # infront of the id*/
/*<section id="example"></section>*/
#example{
	margin: auto;
}

Example 4: css selector

/*
Selector                Example                    Example Description
*/
.class	                .intro	                /* Selects all elements with class="intro" */
.class1.class2	        .name1.name2	        /* Selects all elements with both name1 and name2 set within its class attribute */
.class1 .class2	        .name1 .name2	        /* Selects all elements with name2 that is a descendant of an element with name1 */
#id            	        #firstname	            /* Selects the element with id="firstname" */
*	                    *       	            /* Selects all elements */
element	                p	                    /* Selects all <p> elements */
element.class	        p.intro	                /* Selects all <p> elements with class="intro" */
element,element	        div, p	                /* Selects all <div> elements and all <p> elements */
element element 	    div p	                /* Selects all <p> elements inside <div> elements */
element>element 	    div > p	                /* Selects all <p> elements where the parent is a <div> element */
element+element	        div + p	                /* Selects all <p> elements that are placed immediately after <div> elements */
element1~element2	    p ~ ul	                /* Selects every <ul> element that are preceded by a <p> element */
[attribute]     	    [target]	            /* Selects all elements with a target attribute */
[attribute=value]	    [target=_blank]	        /* Selects all elements with target="_blank" */
[attribute~=value]	    [title~=flower]	        /* Selects all elements with a title attribute containing the word "flower" */
[attribute|=value]	    [lang|=en]	            /* Selects all elements with a lang attribute value starting with "en" */
[attribute^=value]	    a[href^="https"]        /* Selects every <a> element whose href attribute value begins with "https" */
[attribute$=value]	    a[href$=".pdf"]	        /* Selects every <a> element whose href attribute value ends with ".pdf" */
[attribute*=value]	    a[href*="w3schools"]	/* Selects every <a> element whose href attribute value contains the substring "w3schools" */
:active	                a:active	            /* Selects the active link */
::after	                p::after	            /* Insert something after the content of each <p> element */
::before	            p::before	            /* Insert something before the content of each <p> element */
:checked	            input:checked	        /* Selects every checked <input> element */
:default	            input:default	        /* Selects the default <input> element */
:disabled	            input:disabled	        /* Selects every disabled <input> element */
:empty	                p:empty	Selects         /* every <p> element that has no children (including text nodes) */
:enabled	            input:enabled	        /* Selects every enabled <input> element */
:first-child	        p:first-child	        /* Selects every <p> element that is the first child of its parent */
::first-letter	        p::first-letter	        /* Selects the first letter of every <p> element */
::first-line	        p::first-line	        /* Selects the first line of every <p> element */
:first-of-type	        p:first-of-type	        /* Selects every <p> element that is the first <p> element of its parent */
:focus	                input:focus	            /* Selects the input element which has focus */
:hover	                a:hover	                /* Selects links on mouse over */

Example 5: CSS how to select ID

#id-selector-name{
  font-size: 20px;
}

.class-selector-name{
  color: green;
}

Example 6: what is a css selector

h1 {
  color: red;
}

In this CSS code example that sets the color of all h1s to red 
the "h1" is the selctor because we are applying this style to 
the h1s.