HTML, CSS

Position, Pseudo selector

_션샤인 2024. 7. 23. 10:01

3.12 Position

-> Can be used when you want to modify a little bit right/up side like this

1) position: fixed

even if page scrolling down, 'div' stay same position.

3.13 Relative Absolute

will align itself according to the closest relative father.

If you do position absolute, it will be aligned according to <body>

you should do relative to parent element.

it means from where the element start to the top/right/left/bottom

3.14 Pseudo selector

A way for pointing at the elements.

(.class name, #id name, div: first-child {} / last-child / nth-child(n) )

you can use even / odd (for even/odd number)

every 3 of them -> 3n+1

3.15 Combinator

<div>

<span>hello</span>

<p>

<span> inside</span></p>

</div>

When paragraph <p> has another children <span>,and you want to select <span>

-> p span {} (parent children_inside of the parent, look for children selector)

-> p > span {} span direnct children of the paragraph

-> p + span {} span next to the paragraph (has to be immediately next to p)

-> p ~ span {} span next to the paragraph (doesn't has to be immediately next)

3.16 Pseudo selector part2

you can select elements using attributes.

input[placeholder="first name"] {}

input[type="text"]{}

if you want to select inputs that place holder contains 'name'

-> input[placeholder~="name"]{}

if you want to select anchors that ends with ".org"

-> a[href$=".org"]{}