Pozicování

• vlastnost position
• statické, relativní, absolutní, fixované, lepivé
• vlastnosti top, bottom, left, right

Statické pozicování

• static
• klasické pozicování, které známe
• podle místa na stránce
• nefungují: top, bottom, left, right

Relativní pozicování

• relative
• velmi podobné statickému pozicování
• prvek je umístěn na stejném místě jako při statickém
• fungují vlastnosti top, bottom, left, right

Fixované pozicování

• fixed
• prvek se při pohybu na stránce nehýbe — je vázán na velikost obrazovky
• prvek se umisťuje nad ostatní prvky — neovlivňuje jiné prvky
• fungují vlastnosti top, bottom, left, right

Absolutní pozicování

• absolute
• prvek se zachytí na nejbližší prvek, na kterém je nějaké pozicování přesně nastavené (relative, absolute, ...)
• popř. na body
• jiná vrstva

"Lepící" pozicování

• sticky
• mění se mezi stavy relative a fixed
• podle scrollovánína stránce — dokud nenalezne dané odsazení
• potom se přilepí a hýbe se během skrolování

Vrstva

• vlastnost z-index
• číslo určující vrstvu
• čím vyšší číslo, tím bude vykresleno navrch
• i záporné hodnoty

Pseudotřídy

Pseudotřída

• speciální selektor
• ukazuje na stav tagu
• můžeme měnit vlastnosti
• např. při najetí myši, zda je n-tý prvek, ...
• zapisujeme pomoci :
• můžeme navazovat

Navigační pseudotřídy

• selektování tagů na základě jejich položení v HTML


• :nth-child(4)
• :nth-child(2n)
• :first-child
• :only-child
• :first-of-type

Aktivovatelné pseudotřídy

• aktivace pomocí uživatelských aktivit


• :hover
• :active
• :focus

Negace

• zneguje daný selektor
• :not


• :not(.sad)
• :not(:first-child)

Seznam

https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes

Pseudoelementy

Pseudoelement

• selektor
• umožní stylovat speciální část tagu
• např. první písmeno, první řádek, ...
• používáme ::
• můžeme navazovat


• ::selection
• ::first-line
• ::first-letter
• ::after a ::before

Seznam

https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements

Další selektory

Vedlejší potomci

Vedlejší přímí potomci

Selektování dle atributů

• [attr]
• [attr="value"]
• [attr*="ssps"]
• [attr^="https://"]
• [attr$=".org"]
• [attr~="link"] (separator mezera)

https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

Děkuji za pozornost!

• matej.cajthaml@ssps.cz
• https://ssps.cajthaml.eu/