W2_D1

Selectors in CSS

Simple Selectors

element,

class,

id,

/* universal selector */
* {
  color: hotpink;
}

/* same as [lang^="en"] */
* [lang^="en"] {
  color: green;
}

/* same as .warning */
*.warning {
  color: red;
}

/* same as #maincontent */
*#maincontent {
  border: 1px solid blue;
}

universal selector

/* class selector */
.classname {
  color: hotpink;
}

/* id selector */
#myId {
  color: green;
}

/* HTML tag as */
div {
  color: red;
}

Selectors in CSS

Simple Selectors

attribute:- selects by an HTML element’s attribute, its value and or some condition.

/* <a> elements with a title attribute */
a[title] {
  color: purple;
}

/* input which has type “text” */
input[type='text'] {
	color: red;
}

/* any element which has role “button” */
[role='button'] {
	color: red;
}

/* A class which has value 'primary', compare with case-insensitive, 's' for sensitive */
[class='primary' i] {
  color: red;
}

/* A href that contains "example.com" */
[href*='example.com'] {
	color: red;
}

/* elements whose class attribute contains the word "logo" */
[class~="logo"] {
  padding: 2px;
}

/* A href that starts with https */
[href^='https'] {
	color: green;
}

/* A href that ends with .com */
[href$='.com'] {
	color: blue;
}

Select div tags with class value starting with 'divclass'

Select div tags with class value ending with 'no-class'

Selectors in CSS

Pseudo Classes Selectors

:hover - triggered when an element is interacted with pointing device like mouse

1. mouseenter

2. mouseleave,

:active - triggered when an element is actively being interacted with,

Eg:
1. mousedown - when mouse key is pressed

2. mouseup - when mouse key is released,

Selectors in CSS

Pseudo Classes Selectors

:focus - works same as :hover but for elements when focused from keyboard,

:focus-within - when child element receives focus, and

:focus-visible - when :focus has outline: none, still shows the focus rings if the element has been focussed through keyboard.

Selectors in CSS

Pseudo Classes Selectors

:link - for <a> tag with href attributes

:visited

:target: with id as fragment identifier, can style the content with that id from the url.

Selectors in CSS

Pseudo Classes Selectors

Form related states:

:disabled and :enabled,

:checked and :indeterminate

:placeholder-shown - to style the placeholder in input field

:required – Selects inputs with the required attribute,
:optional – Selects inputs that do not have the required attribute,

:read-only / :read-write - Selects inputs that have read-only

:valid, :invalid and :in-range

Selectors in CSS

Pseudo Classes Selectors

:first-child and :last-child,

:first-of-type and :last-of-type,

:only-child and :only-of-type,

Selectors in CSS

Pseudo Classes Selectors

:nth-child - is a function, selects any 'n' children,

:nth-of-type - is a function, selects any 'n' children of the type,

keywords: odd, even,

functional formula:
(An+B), where:
A - integer, step size, default 1

n - integer, default 0.
B - integer, offset, default 0

/* Selects all even children */
:nth-child(even) {
  
}

/* Selects all odd children */
:nth-child(odd) {
  
}

/* Selects only 2nd child */
:nth-child(2) {
  
}

/* Selects every second/all even children */
:nth-child(2n) {
  
}

/* Selects all children starting from 2nd child*/
:nth-child(n+2) {
  
}

/* Selects every 2nd child starting from 2nd child*/
:nth-child(2n+2) {
  
}

/* Selects first 5 children */
:nth-child(-n+5) {
  
}

element ordering starts from 1 not 0 or negatives

Selectors in CSS

Pseudo Classes Selectors

/* Selects all even children */
:nth-child(even) {
  
}

/* Selects all odd children */
:nth-child(odd) {
  
}

/* Selects only 2nd child */
:nth-child(2) {
  
}

/* Selects every second/all even children */
:nth-child(2n) {
  
}

/* Selects all children starting from 2nd child*/
:nth-child(n+2) {
  
}

/* Selects every 2nd child starting from 2nd child*/
:nth-child(2n+2) {
  
}

/* Selects first 5 children */
:nth-child(-n+5) {
  
}

(An+B)

3n+3:
(3 x 0) + 3 = 3 = 3rd Element
(3 x 1) + 3 = 6 = 6th Element
(3 x 2) + 3 = 9 = 9th Element

4n-1:
(4 x 0) - 1 = -1 = no match
(4 x 1) - 1 = 3 = 3rd Element
(4 x 2) - 1 = 7 = 7th Element


-n+3:
-0 + 3 = 3 = 3rd Element
-1 + 3 = 2 = 2nd Element
-2 + 3 = 1 = 1st Element
-3 + 3 = 0 = no match

Calculating An+B for various expressions:

Selectors in CSS

Pseudo Classes Selectors

<section> 
  <p>Little</p> 
  <p>Piggy</p> <!-- We want this one --> 
</section>

/* selects "Little" 
 * p tag that is also 2nd child
 * */
p:nth-child(2) { 
  color: red; 
}

/* selects "Piggy" 
 * Select the second paragraph 
 * child of a parent
 * */
p:nth-of-type(2) { 
  color: red; 
}

/* selects "Little" */
p:hover:nth-child(2) { 
  color: red; 
}

<section>
   <h1>Words</h1>
   <p>Little</p>
  <!-- We want this one -->
   <p>Piggy</p>
</section>

both will work same

nth-of-type will work correctly

Difference between

nth-child and nth-of-type

Selectors in CSS

Pseudo Classes Selectors

/* selects "Little" 
 * p tag that is also 2nd child
 * */
p:nth-child(2) { 
  color: red; 
}

/* Select first three list items which 
 * have a class="important" */
:nth-child(-n + 3 of li.important) {
    color: red; 
}
/* Select all even li items from group 
 * having class="noted" */
li:nth-child(even of .noted) {
  
}

/* Select eighth through the 
 * fifteenth <p> elements */
p:nth-child(n+8):nth-child(-n+15) {
  border: 5px solid red;
}

The of <selector> syntax

:nth-last-of-type: Works like :nth-of-type, but it counts up from the bottom instead of the top,

:nth-last-child – Works like :nth-child, but it counts from the bottom,

Selectors in CSS

Pseudo Classes Selectors

/* 
 * if any p tag has no innertext
 * */
p:empty { 
  background-color: yellow;
}

:empty - for styling empty HTML tags

<p>I'm a Paragraph Tag</p>
<p></p>

:root - Selects the element that is at the root of the document,

Can add multiple selectors at once.
Can use selectors without any tag.

Selectors in CSS

Pseudo Classes Selectors

Selectors in CSS

Combinators in CSS

Child combinator (>) - matches only direct children,

Descendant combinator ([space]) - matches direct and nested children as well,

Next-sibling combinator (+) - matches only the immediate second element, if both are children of the same parent,

Subsequent-sibling combinator (~) - matches all the adjacent elements, if both are children of the same parent,

Selector list (,) - select all the elements mentioned,

Namespace separator (not required)

A tool that translates CSS selectors into plain-english explainers:
https://kittygiraudel.github.io/selectors-explained/

/* All li that are only direct children 
 * of ul which has class="my-things"*/
ul.my-things > li {
  margin: 2em;
}

/* li that are direct or nested children 
 * of ul which has class="my-things"*/
ul.my-things li {
  margin: 2em;
}

/* Paragraphs that come 
 * immediately after any image */
img + p {
  font-weight: bold;
}

/* Paragraphs that are just 
 * child of same parent and come after img */
img ~ p {
  color: red;
}

/* All span and div tags */
span,
div {
  border: red 2px solid;
}

#main,
.content,
article,
h1 + p {
  font-size: 1.1em;
}

Selectors in CSS

Pseudo Elements in CSS

::before and ::after - they create a child element inside an element only if you define a content property,

::first-letter - styles first letter,

::first-line - styles first line,

::backdrop - If you have an element that is presented in full screen mode, such as a <dialog> or a <video>, you can style the space between the element and the rest of the page -- backdrop,

::marker - The ::marker pseudo-element lets you style the bullet or number for a list item or the arrow of a <summary> element,

::selection - styling selections,

::placeholder - styling placeholder,

::cue (not relevant)