WEB SELECTOR NOTES

base selector

1. Label selector
label+{}
eg.div{ attribute: attribute value }

2.id selector
#+id+{}
eg.#one{ attribute: attribute value }

3. Class selector
.+class name+{}
eg. .one{ attribute: attribute value }

4. Wildcard selector
*+{}

5. Child selector - select the parent child
. Class name + ">" + li + {}

6. Descendants selector - select all descendants
. Class name +" "+li+{}

7. Compound selector
label, label, label+{}
eg.div,
p,
span{}

8. Attribute selector
eg.input[type="password"]{ }

pseudo class selector

Mouseover
class name or tag name+": "+hover{ } eg.a:hover { /* cursor mouse style*/ cursor: pointer; font-size: 40px; }

Struct pseudo-class selector

Select a line in ul to change the attribute
eg.ul li:first-child { background-color: pink; }

ul li:last-child {
background-color: green;
}

/* Search from all attributes */
ul li:nth-child(3) { background-color: blue; } /* Search from li (selected attributes) */ ul li:nth-of-type(4 ) { background-color: chartreuse; }

Pseudo-element selector

1. Add content before or after the content
eg.
ul li::before{ content: “~”; } ul li::after{ content: “<”; }

2. Add default value
eg.input::placeholder{ color: red; }

3. Change color when selected
eg.ul li:nth-child(4)::selection{ color: yellow; }