CSS - Selektory

Selektory Selektorem można nazwoć dowolny element języka HTML, dla którego chcemy zdefiniować parametry formatowania. Wyróżniamy następujące selektory: Selektor elementów Selektor atrybutów Selektory specjalne Selektor pseudoklas Selektory pseudoelementu

Selektor elementu Selektor typu – służy do definiowania formatowania znaczników występujących na stronie: p {color: blue; font-size: 4pt;} H3 {color: green; font size: 24 pt;}

Selektor elementu Selektor uniwersalny to selektor pasujący do wszystkich znaczników, jest oznaczony * Zamiast grup elementów np: p,h1,h2,table {font-family: courier new; color: green;} * {font-family: courier new; color: green;}

Selektor elementu Selektor potomka – można formatować elementy, które zawarte są wewnątrz innych znaczników, czyli leżą niżej w hierarchii drzewa dokumentu Selektor potomka selektor potomek {właściwość:wartość;} div span {color:red;}

Selektor elementu Selektor dziecka – słuzy do definiowania formatowania elementów, które znajdują się o jeden rząd niżej w hierarchii drzewa dokumentu Selektor dziecka Selektor > dziecko {właściwość:wartość;} div > span {color:red;}

Selektor elementu Selektor braci – umożliwia on nadanie drugiemu z sąsiadujących elementów zdefiniowanych atrybutów formatowania Selektor braci Selektor + brat {właściwość:wartość;} div + span {color:red;}

Selektor atrybutu W języku CSS można formatować znaczniki na podstawie posiadanych przez nie atrybutów. Selektor [atrybut="wartość"] {właściwość: wartość}

Selektor atrybutu Prosty selektor atrybutu Selektor [atrybut] {właściwość: wartość} p [align] {color: yellow}

Selektor atrybutu Selektor atrybutu o określonej wartości Selektor [atrybut="wartość"] {właściwość: wartość} p [align="center"] {color: yellow}

Selektor atrybutu Selektor atrybutu zawierający określony wyraz Selektor [atrybut~="wyraz"] {właściwość: wartość} p [title~="center"] {color: yellow}

Selektor specjalny Selektor klas selektor.klasa {właściwość: wartość} p.tekst1 {color: yellow} odwołanie do klas w dok. HTML ma postać:...

Selektor specjalny Selektor identyfikatora selektor#identyfikator {właściwość: wartość} lub #identyfikator {właściwość: wartość} h3#id1 {color: blue} odwołanie w dokumencie HTML ma postać...

Pseudoklasy Odsyłacze

Pseudoelementy Pseudoklasy wykorzystywane są do formatowania elementów specjalnych takich jak: pierwsza litera  selektor: first-letter {właściwość: wartość;}  p: first-letter {color: red;} pierwsza linia  selektor: first-line {właściwość: wartość;}  p: first-line {color: red;} na początku