[2022.10.01(Sat)] CSS - Basics (4)

Position: Fixed

• By setting the position property to fixed, the box element stays at the current position. Even if we try to scroll, the box will follow us in a fixed position.
• By setting a boxes position to fixed, the box neglects every intial rule and stays on top of all the other box.

selector {
  position: fixed;
}

Position: Relative

• We use set the position property to relative whenever we need to just slightly move a box based on its original position.
• the relative value unlocks the top, bottom, left, and right property for movement of boxes.

selector {
  position: relative;
  top: -10px;
  bottom: -15px;
  left: -10px;
  right: -15px;
}

Position: Absolute

• Position absolute is the extreme version of relative where the box escapes its container and can go all the way to the end of the body.
• We can fix the relative position of the box by setting the position of the parent container as relative.

parent {
  position: relative;
}

child {
  position: absolute;
}

Pseudo Selectors (1)

• Pseudo Selectors are an advanced way of selecting elements where we can specifically choose an element we want to change.

selector:first-child {
  background-color: tomato;
}

selector:last-child {
  background-color: wheat;
}

selector:nth-child(even) {
  background-color: teal;
}

Combinators

• Combinators are used to specifically change a property of a child element by accessing the parent element.
• Note that the path from parent to child needs to be specific in order for combinators to work.

// parent to child
---
header p span {
  color: teal;
}

// directly after
---
div > span {
  color: wheat;
}

// brother of (immediately next to)
---
p + span {
  color: tomato;
}

// brother of (not direct but still on the same line)
---
p ~ span {
  color: blue;
}

Pseudo Selectors (2)

• Pseudo Selectors can be applied most in attributes.
• For example, the attribute selector allows you to select any attribute in order to apply a CSS property.
• More can be found on MDN.

// changing the border
---
input:required {
  border: 1px solid tomato;
}

// attribute selector
---
input[type="password"] {
  background-color: thistle;
}

// attribute selector with keyword
---
input[placeholder~="name"] {
  background-color: pink;
}

States

• States can be displayed mainly elements to display the current state.
• There are many different kinds of states such as link, visited, hover, active, focus, etc.
• We can style our elements using states to display our current action on those elements.

// state where the mouse is being clicked
---
button:active {
  background-color: tomato;
}

// state where the mouse hovered over the element
---
button:hover {
  background-color: tomato;
}

// state where a certain element is targeted as the main focus
---
button:focus {
  background-color: tomato;
}

// state where a certain element is changed when the child elements are focused
---
button:focus-within {
  background-color: tomato;
}

// state where a certain element is affected by hovering over another element (chaining)
---
form:hover input {
  background-color: tomato;
}

• There are also some extra pseudo selectors that can be used to style certain attributes

// styling the placeholder
---
input::placeholder {
  color: yellowgreen;
}

// styling the personality of elements (ex. highlighting)
---
p::selection {
  background-color: yellowgreen;
}

// styling the first letter of elements (ex. highlighting)
---
p::first-letter {
  background-color: yellowgreen;
}

Tips On Colors

• Choosing colors on elements can be very repetitive.
• By using the :root property, we can choose a color and apply it to every other elements just by inputting the :root variable.

:root {
  --main-color: teal;
}

p {
  background-color: var(--main-color);
}