{"id":286,"date":"2020-03-06T23:49:00","date_gmt":"2020-03-06T23:49:00","guid":{"rendered":"https:\/\/ramk.ee\/opikud\/veebidisain\/?post_type=chapter&p=286"},"modified":"2020-03-11T13:04:30","modified_gmt":"2020-03-11T13:04:30","slug":"keerulisemad-selektorid","status":"publish","type":"chapter","link":"https:\/\/ramk.ee\/opikud\/veebidisain\/chapter\/keerulisemad-selektorid\/","title":{"rendered":"Keerulisemad selektorid"},"content":{"raw":"Lisaks eelmises peat\u00fckis v\u00e4lja toodud \u00fcldkasutatavatele elementide selekteerimisviisidele eksisteerib veel hulganisti keerulisemaid selekteerimisviise. J\u00e4rgnevalt on nendest m\u00f5ningad v\u00e4lja toodud.\r\n

Kujundus vastavalt elementide sisaldumisele \u00fcksteise sees<\/h1>\r\nStiile saab adresseerida konkreetsele elemendile vastavalt tema nimele ja paiknemisele teiste elementide sees (hierarhia). Tuleb lihtsalt elemendid \u00fcksteise sisaldamise j\u00e4rjekorras t\u00fchikutega eraldatult \u00fcles lugeda.\r\n\r\nN\u00e4iteks kui HTML dokumendis on elemendid \u00fcksteise sees j\u00e4rgmiselt:\r\n
<div id=\u201dkast\u201d>\r\n  <div id=\u201dvasak\u201d>\r\n    <img id=\u201dpilt1_1\u201d ... \/>\r\n    <img id=\u201dpilt1_2\u201d ... \/>\r\n  <\/div>\r\n  <div id=\u201dparem\u201d>\r\n    <img id=\u201dpilt2_1\u201d ... \/>\r\n  <\/div>\r\n<\/div>\r\n<\/pre>\r\nSiis saab stiile kirjutada n\u00e4iteks nii:\r\n
#kast #vasak img { \r\n  css stiil\r\n}<\/pre>\r\nmille puhul rakendatakse stiili k\u00f5ikidele piltidele, mis sisalduvad elemendi \u201ekast\u201c sees olevas elemendis \u201evasak\u201c. See annab mugava ja paindliku v\u00f5imaluse veebilehe erinevate osade elementidele erinevaid ja\/v\u00f5i sarnaseid kujundusi luua.\r\n
Kujundus vastavalt elementi sisaldavale elemendile (parent)<\/h1>\r\nVahel on tarvis kirjutada kujundus elementidele, mis sisalduvad mingit kindlat t\u00fc\u00fcpi elemendis. Sellisel juhul pannakse selektor kirja j\u00e4rgmisel kujul: suurelement>v\u00e4ikeelement<\/em>\r\n\r\n<\/code>N\u00e4iteks v\u00f5ib luua kujunduse k\u00f5igile piltidele, mis on paigutatud tabeli lahtritesse (HTML elemendid <td><\/code>):\r\n
td>img {\r\n  margin: 5px;\r\n}<\/pre>\r\n
Kujundus vastavalt elementide otsesele j\u00e4rgnevusele<\/h1>\r\nKui on tarvis m\u00e4\u00e4rata kujundust elementidele, mis j\u00e4rgnevad mingisugusele kindlale elemendile, siis pannakse selektor kirja j\u00e4rgmiselt:\r\nesimeneelement+j\u00e4rgnevelement<\/em>\r\nN\u00e4iteks loome kujunduse tekstil\u00f5ikudele (HTML element <p><\/code>), mis j\u00e4rgnevad suurtele pealkirjadele (HTML element <h1><\/code>):\r\n
h1+p {\r\n  font-size: 20px;\r\n}<\/pre>\r\nNB! Saab kirja panna ka pikema j\u00e4rgnevuse jada, n\u00e4iteks l\u00f5igule, mis j\u00e4rgneb <h2><\/code> pealkirjale, mis omakorda j\u00e4rgneb otse peakirjale <h1><\/code> ning vajadusel veelgi pikemalt!<\/span>\r\nN\u00e4iteks:\r\n
h1+h2+p {\r\n  font-size: 20px;\r\n}<\/pre>\r\nSarnaselt saab viidata k\u00f5ikidele kindlat t\u00fc\u00fcpi elementidele, millele eelneb konkreetne element. Selektor kirjutatakse siis kujul: esimeneelement~j\u00e4rgnevelement<\/em>\r\n\r\n<\/code>N\u00e4iteks loome kujunduse k\u00f5igile l\u00f5ikudele, millele on eelnenud kolmanda taseme pealkiri (HTML element <h3><\/code>):\r\n
h3~p {\r\n  color: gray;\r\n}<\/pre>\r\n
Atribuudi selektorid<\/h1>\r\nCSS3 v\u00f5imaldab kasutada selektoreid vastavalt HTML elementide atribuutidele, nende v\u00e4\u00e4rtustele jne. Sellisel juhul kirjutatakse selektor tervenisti kandilistesse sulgudesse: [atribuut_ja_selle_v\u00e4\u00e4rtus_vms]<\/em>\r\n
    \r\n \t
  • <\/code>Kujundust v\u00f5ib luua vastavalt m\u00f5ne atribuudi olemasolule.<\/li>\r\n<\/ul>\r\nN\u00e4iteks loome kujunduse k\u00f5igile elementidele, millel on olemas atribuut \u201elang<\/em>\u201c:\r\n
    [lang] {\r\n  font-famly: verdana;\r\n}<\/pre>\r\n
      \r\n \t
    • Kujunduse saab luua vastavalt mingi atribuudi v\u00e4\u00e4rtusele.<\/li>\r\n<\/ul>\r\nN\u00e4iteks loome kujunduse k\u00f5igile neile elementidele, mille atribuudi \u201etitle<\/em>\u201c v\u00e4\u00e4rtus on \u201eselgitus\u201c:\r\n
      [title=selgitus] {\r\n  font-style: italic;\r\n}<\/pre>\r\nAtribuudi v\u00e4\u00e4rtuse kasutamisel v\u00f5ib viidata ka mingile osale v\u00e4\u00e4rtusest (string)!\r\n
        \r\n \t
      • \r\n
          \r\n \t
        • [atribuut^=string]<\/code><\/em> \u2013 viitab elemendile, mille atribuudi v\u00e4\u00e4rtus algab vastava stringiga;<\/li>\r\n \t
        • [atribuut$=string]<\/code><\/em> \u2013 viitab elemendile, mille atribuudi v\u00e4\u00e4rtus l\u00f5ppeb vastava stringiga;<\/li>\r\n \t
        • [atribuut*=string]<\/code><\/em> \u2013 viitab elemendile, mille atribuudi v\u00e4\u00e4rtus sisaldab vastavat stringi.<\/li>\r\n<\/ul>\r\n<\/li>\r\n<\/ul>\r\nNB! String tuleb selektoris paigutada jutum\u00e4rkide vahele!<\/span>\r\n\r\nN\u00e4iteks loome stiili k\u00f5igile elementidele, mille atribuudi \u201esrc\u201c v\u00e4\u00e4rtus sisaldab stringi \u201eramkool.edu.ee\u201c:\r\n
          [src*=\"ramkool.edu.ee\"] {\r\n  font-family: courier;\r\n}\r\n<\/pre>\r\n
            \r\n \t
          • Eraldi on olemas keeleatribuudiga seotud pseudoklass :lang<\/em>.<\/li>\r\n<\/ul>\r\nN\u00e4iteks loome kujunduse k\u00f5igile elementidele <h2><\/code>, millel kasutatakse inglise keelt:\r\n
            h2:lang(en) {\r\n  font-style: italic;\r\n}<\/pre>\r\n
            Pseudoklassid ja pseudoelemendid<\/h1>\r\nPseudoklasse ja pseudoelemente kasutatakse veebilehe elementidele veelgi paindlikumalt stiilide m\u00e4\u00e4ramiseks.\r\n
            Pseudoklassid<\/h3>\r\nPseudoklasse kasutatakse veebilehe elementide erinevate olekute (state<\/em>) defineerimiseks. Nende puhul lisatakse tavap\u00e4rasele selektorile kooloni j\u00e4rele veel nn pseudonimi j\u00e4rgmisel moel: selektor:pseudonimi{kujundus}<\/code>\r\n\r\n<\/code>K\u00f5ige tuntumad pseudoelemendid on ilmselt linkidega seotud:\r\n
              \r\n \t
            • a:link <\/em>\u2013 k\u00fclastamata link;<\/li>\r\n \t
            • a:visited<\/em> \u2013 k\u00fclastatud link;<\/li>\r\n \t
            • a:hover<\/em> \u2013 hiirekursor on liikunud lingi peale;<\/li>\r\n \t
            • a:active<\/em> \u2013 hiire vasak nupp on lingil alla vajutatud (kl\u00f5psamine).<\/li>\r\n<\/ul>\r\nN\u00e4iteks:\r\n
              a:hover {\r\n  font-weight: bold;\r\n}<\/pre>\r\nNB! Nendest mainitutest saab pseudonime :hover <\/em>kasutada ka teistel elementidel ning sedasi luua eriefekte hiirega elementidele liikumisel.<\/span>\r\n\r\nOlemas on ka pseudoklass, mis viitab mingi lingi sihtelemendile (target<\/em>), mis on ka hetkel aktiivne. Selleks on pseudoklass :target<\/em>. N\u00e4iteks kujundame elemendi nimega \u201eportree\u201c, mis oli klikitud URL-i v\u00e4\u00e4rtuseks ja mis on aktiivne:\r\n
              #portree:target {\r\n  background-color: yellow;\r\n}<\/pre>\r\n\u00dcks huvitav pseudoklass t\u00e4histab k\u00f5iki nimetatud elemendist erinevaid elemente \u2013 selleks on :not<\/em> pseudoklass. .\r\n\r\nNB! N\u00e4iteks kasutades selektorit :not(p)<\/em> selekteeritakse k\u00f5ik elemendid peale <p><\/code> elemendi, kaasaarvatud <html><\/code> ja <body><\/code>.<\/span>\r\n
              :not(p) {\r\n  text-decoration: underline;\r\n}<\/pre>\r\nKogu veebilehe juurelemendi (root<\/em>) jaoks on pseudoklass :root<\/em>. HTML dokumendi puhul on root<\/em> elemendiks <html><\/code> element:\r\n
              :root {\r\n  background-color: blue;\r\n}<\/pre>\r\nT\u00fchja elemendi jaoks on pseudoklass :empty<\/code>.<\/em> N\u00e4iteks loome kujunduse t\u00fchjadele tabeli lahtritele:\r\n
              td:empty {\r\n  background-color: pink;\r\n}<\/pre>\r\n[caption id=\"attachment_291\" align=\"aligncenter\" width=\"450\"]\"Tabel Tulemus: tabeli t\u00fchjad lahtrid on roosa taustaga[\/caption]\r\n
              Kasutaja sisendiga seotud pseudoklassid<\/h2>\r\nOsa pseudoklasse on sellised, mida saab kasutada vaid nende elementide puhul, mis v\u00f5imaldavad kasutajal midagi sisestada, n\u00e4iteks klaviatuurilt.\r\n
                \r\n \t
              • Kujundust saab luua elemendile, millel on fookus, selleks kasutatakse pseudonime :focus<\/em>. N\u00e4iteks:\r\n
                input:focus {\r\n  background-color: #FFDDDD;\r\n}<\/pre>\r\n<\/li>\r\n \t
              • V\u00f5ib l\u00e4htuda sellest, kas <input><\/code> element on aktiveeritud (enabled<\/em>), selleks on pseudonimi :enabled<\/em>. N\u00e4iteks:\r\n
                input:enabled {\r\n  font-weight: bold;\r\n}<\/pre>\r\n <\/li>\r\n \t
              • Vastupidiselt v\u00f5ib kasutada pseudonime :disabled<\/em>, mis t\u00e4histab neid <input><\/code><\/span> elemente, mis on deaktiveeritud. N\u00e4iteks:\r\n
                input:disabled {\r\n  color: gray;\r\n}<\/pre>\r\n <\/li>\r\n \t
              • V\u00f5ib kujundada neid <input> elemente, mis on m\u00e4rkeruutudena m\u00e4rgitud, selleks on pseudonimi :checked<\/em>. N\u00e4iteks:\r\n
                input:checked {\r\n  background-color: #DDDDDD;\r\n}<\/pre>\r\n<\/li>\r\n<\/ul>\r\n
                Elementide j\u00e4rjestusega seotud pseudoklassid<\/span><\/h2>\r\nPseudoklasside abil saab kujundada ka elemente vastavalt nende asukohale neid sisaldavas elemendis (parent<\/em>).\r\n
                  \r\n \t
                • Kindlat t\u00fc\u00fcpi elementi, mis on esimene t\u00fctarelement (child<\/em>) teda sisaldavas elemendis saab kujundada pseudoklassi :first-child<\/em> abil.\r\nN\u00e4iteks:\r\n
                  h2:first-child {\r\n  background-color: white;\r\n}<\/pre>\r\n <\/li>\r\n \t
                • Kindlat t\u00fc\u00fcpi elementi, mis on viimane t\u00fctarelement (child<\/em>) teda sisaldavas elemendis <\/span>saab kujundada pseudoklassi :last-child<\/em> abil.<\/span>N\u00e4iteks muudame l\u00f5igu, mis on viimane t\u00fctarelement, laiust:\r\n
                  p:last-child {\r\n  width: 50%;\r\n}<\/pre>\r\n <\/li>\r\n \t
                • Esimese kindlat t\u00fc\u00fcpi elemendi jaoks teda sisaldavas elemendis (parent<\/em>) on <\/span>pseudoklass :first-of-type<\/em>.<\/span>N\u00e4iteks m\u00e4\u00e4rame mingis elemendis sisalduvale esimesele l\u00f5igule taandrea:\r\n
                  p:first-of-type {\r\n text-indent: 20px;\r\n}<\/pre>\r\n <\/li>\r\n \t
                • Viimase kindlat t\u00fc\u00fcpi elemendi jaoks teda sisaldavas elemendis (parent<\/em>) on <\/span>pseudoklass :last-of-type<\/em>.<\/span>N\u00e4iteks muudame mingis elemendis sisalduva viimase sektsiooni raamjoone alumised nurgad \u00fcmaraks:\r\n
                  section:last-of-type {\r\n  border-bottom-left-radius: 20px;\r\n  border-bottom-right-radius: 20px;\r\n}<\/pre>\r\n <\/li>\r\n \t
                • Lugedes algusest saab kindlal positsioonil asuvale t\u00fctarelemendile (child<\/em>) viidata <\/span>pseudoklassiga :nth-child<\/em>.<\/span>N\u00e4iteks loome kujunduse l\u00f5igule, mis on kolmas t\u00fctarelement:\r\n
                  p:nth-child(3) {\r\n  font-family: arial;\r\n}<\/pre>\r\n <\/li>\r\n \t
                • Elementidele saab viidata ka tagantpoolt lugema hakates, siis kasutatakse pseudoklassi <\/span>:nth-last-child(n)<\/em>.<\/span>N\u00e4iteks loome kujunduse l\u00f5igule, mis on tagantpoolt kolmas t\u00fctarelement:\r\n
                  p:nth-last-child(3) {\r\n  font-family: arial;\r\n}<\/pre>\r\n <\/li>\r\n \t
                • Sarnaselt saab viidata kindlat t\u00fc\u00fcpi elementidele nii eestpoolt kui ka tagantpoolt <\/span>lugedes, selleks on pseudoklassid :nth-of-type(n)<\/em> ja :nth-last-of-type(n)<\/em>.<\/span>N\u00e4iteks loome kujunduse tagantpoolt teisele sektsioonile:\r\n
                  section:nth-last-of-type {\r\n  border-width: 10px;\r\n}<\/pre>\r\n<\/li>\r\n \t
                • J\u00e4rjekorranumbritena saab kasutada ka viidet paaris v\u00f5i paaritutele arvudele vastavalt even v\u00f5i odd.\r\nN\u00e4iteks:\r\n
                  p:nth-child(odd) {\r\n  font-family: arial;\r\n}<\/pre>\r\n<\/li>\r\n<\/ul>\r\n
                  Ainsa t\u00fctarelemendi pseudoklassid<\/h2>\r\n
                    \r\n \t
                  • Elemendile, mis on ainsaks t\u00fctarelemendiks mingis elemendis, m\u00e4\u00e4ratakse kujundus kasutades pseudoklassi :only-child<\/em>.\r\nN\u00e4iteks m\u00e4\u00e4rame ainsaks t\u00fctarelemendiks olevale elemendile <div><\/code> raamjoone:\r\n
                    div:only-child {\r\n  border: 20px dashed blue;\r\n}<\/pre>\r\n <\/li>\r\n \t
                  • Elemendile, mis on ainus vastavat t\u00fc\u00fcpi t\u00fctarelement, m\u00e4\u00e4ratakse kujundus kasutades <\/span>pseudoelementi :only-of-type<\/em>;<\/span><\/li>\r\n<\/ul>\r\n
                    Pseudoelemendid<\/h2>\r\nPseudoelemendid viitavad veebilehe elemendi mingisugusele osale.\r\n\r\nPseudoelementide puhul on CSS3 puhul v\u00f5etud kasutusele kirjaviis, kus on kaks koolonit. Eesm\u00e4rgiks on r\u00f5hutada pseudoklasside ja pseudoelementide erinevust.\r\n\r\nselektor::pseudoelement{kujundus}<\/em>\r\n
                    Esimese tekstirea ja t\u00e4hem\u00e4rgi pseudoelemendid<\/h2>\r\nTeksti kujundamisel saab appi v\u00f5tta pseudoelemendid , mis viitavad esimesele t\u00e4hem\u00e4rgile v\u00f5i esimesele tekstireale. Nendeks pseudoelementideks on: ::first-line<\/em> ja ::first-letter<\/em>.\r\n\r\nN\u00e4iteks loome kujunduse k\u00f5ikide l\u00f5ikude esimestele t\u00e4hem\u00e4rkidele:\r\n
                    p::first-letter {\r\n  font-size: xx-large;\r\n  color: red;\r\n}<\/pre>\r\nV\u00f5i loome kujunduse mingisuguse suure ploki esimese l\u00f5igu esimesele t\u00e4hem\u00e4rgile:\r\n
                    p:first-of-type::first-letter {\r\n  font-size: xx-large;\r\n  color: red;\r\n}<\/pre>\r\n[caption id=\"attachment_293\" align=\"aligncenter\" width=\"500\"]\"l\u00f5igu Esimese l\u00f5igu esimene t\u00e4ht on kujundatud[\/caption]\r\n
                    Pseudoelemendid lisamaks sisu elementide ette ja j\u00e4rele<\/h2>\r\nSelleks, et lisada mingit kindlat sisu m\u00e4\u00e4ratud elementide ette v\u00f5i j\u00e4rele on pseudoelemendid ::before<\/em> ja ::after<\/em>.\r\n\r\nSisu lisatakse omadusega content<\/em>. Sellel omadusel on j\u00e4rgmised v\u00f5imalikud v\u00e4\u00e4rtused:\r\n
                      \r\n \t
                    • none<\/em> \u2013 ei lisata mingit sisu;<\/li>\r\n \t
                    • normal<\/em> \u2013 (vaikev\u00e4\u00e4rtus) seab selle omaduse v\u00e4\u00e4rtuse vaikimisi kasutatavale v\u00e4\u00e4rtusele \u201enone<\/em>\u201c;<\/li>\r\n \t
                    • counter<\/em> \u2013 lisab sisule loenduri v\u00e4\u00e4rtuse (loenduri nimetus tuleb lisada sulgudesse);<\/li>\r\n \t
                    • attr<\/em> (atribudinimi) \u2013 lisab sisule elemendi vastava atribuudi v\u00e4\u00e4rtuse;<\/li>\r\n \t
                    • string<\/em> \u2013 lisab sisule m\u00e4\u00e4ratud stringi (teksti jutum\u00e4rkides);<\/li>\r\n \t
                    • open-quote<\/em> \u2013 lisab sisule alustava jutum\u00e4rgi;<\/li>\r\n \t
                    • close-quote<\/em> \u2013 lisab sisule l\u00f5petava jutum\u00e4rgi;<\/li>\r\n \t
                    • no-open-quote<\/em> \u2013 eemaldab alustava jutum\u00e4rgi;<\/li>\r\n \t
                    • no-close-quote<\/em> \u2013 eemaldab l\u00f5petava jutum\u00e4rgi;<\/li>\r\n \t
                    • url <\/em>(aadress) \u2013 lisab sisule mingi meedia (pilt, heli- v\u00f5i videoklipp);<\/li>\r\n \t
                    • initial<\/em> \u2013 seab selle omaduse esialgsele v\u00e4\u00e4rtusele;<\/li>\r\n \t
                    • inherit<\/em> \u2013 loend p\u00e4rib vastava omaduse teda sisaldavalt elemendilt (parent<\/em>).<\/li>\r\n<\/ul>\r\nN\u00e4iteks lisame pealkirjadele <h2><\/code> ette s\u00f5na \u201ePeat\u00fckk\u201c ning jutum\u00e4rkide alguse ning <h2><\/code> j\u00e4rele jutum\u00e4rkide l\u00f5pu:\r\n
                      h2::before {\r\n  content: \"Peat\u00fckk \" open-quote;\r\n}\r\nh2::after {\r\n  content: close-quote;\r\n}\r\n<\/pre>\r\n
                      Kasutaja poolt valitud osa<\/h2>\r\n\u00dcks pseudoelement viitab veebilehe mingi elemendi kasutaja poolt valitud (selected<\/em>) osale. Selleks on pseudoelement ::selection<\/em>.\r\nN\u00e4iteks:\r\n
                      p::selection {\r\n  font-style: italic;\r\n}<\/pre>","rendered":"
                      Lisaks eelmises peat\u00fckis v\u00e4lja toodud \u00fcldkasutatavatele elementide selekteerimisviisidele eksisteerib veel hulganisti keerulisemaid selekteerimisviise. J\u00e4rgnevalt on nendest m\u00f5ningad v\u00e4lja toodud.<\/p>\n
                      Kujundus vastavalt elementide sisaldumisele \u00fcksteise sees<\/h1>\n
                      Stiile saab adresseerida konkreetsele elemendile vastavalt tema nimele ja paiknemisele teiste elementide sees (hierarhia). Tuleb lihtsalt elemendid \u00fcksteise sisaldamise j\u00e4rjekorras t\u00fchikutega eraldatult \u00fcles lugeda.<\/p>\n
                      N\u00e4iteks kui HTML dokumendis on elemendid \u00fcksteise sees j\u00e4rgmiselt:<\/p>\n
                      <div id=\u201dkast\u201d>\r\n  <div id=\u201dvasak\u201d>\r\n    <img id=\u201dpilt1_1\u201d ... \/>\r\n    <img id=\u201dpilt1_2\u201d ... \/>\r\n  <\/div>\r\n  <div id=\u201dparem\u201d>\r\n    <img id=\u201dpilt2_1\u201d ... \/>\r\n  <\/div>\r\n<\/div>\r\n<\/pre>\n
                      Siis saab stiile kirjutada n\u00e4iteks nii:<\/p>\n
                      #kast #vasak img { \r\n  css stiil\r\n}<\/pre>\n
                      mille puhul rakendatakse stiili k\u00f5ikidele piltidele, mis sisalduvad elemendi \u201ekast\u201c sees olevas elemendis \u201evasak\u201c. See annab mugava ja paindliku v\u00f5imaluse veebilehe erinevate osade elementidele erinevaid ja\/v\u00f5i sarnaseid kujundusi luua.<\/p>\n
                      Kujundus vastavalt elementi sisaldavale elemendile (parent)<\/h1>\n
                      Vahel on tarvis kirjutada kujundus elementidele, mis sisalduvad mingit kindlat t\u00fc\u00fcpi elemendis. Sellisel juhul pannakse selektor kirja j\u00e4rgmisel kujul: suurelement>v\u00e4ikeelement<\/em><\/p>\n
                      <\/code>N\u00e4iteks v\u00f5ib luua kujunduse k\u00f5igile piltidele, mis on paigutatud tabeli lahtritesse (HTML elemendid <td><\/code>):<\/p>\n
                      td>img {\r\n  margin: 5px;\r\n}<\/pre>\n
                      Kujundus vastavalt elementide otsesele j\u00e4rgnevusele<\/h1>\n
                      Kui on tarvis m\u00e4\u00e4rata kujundust elementidele, mis j\u00e4rgnevad mingisugusele kindlale elemendile, siis pannakse selektor kirja j\u00e4rgmiselt:
                      \nesimeneelement+j\u00e4rgnevelement<\/em>
                      \nN\u00e4iteks loome kujunduse tekstil\u00f5ikudele (HTML element <p><\/code>), mis j\u00e4rgnevad suurtele pealkirjadele (HTML element <h1><\/code>):<\/p>\n
                      h1+p {\r\n  font-size: 20px;\r\n}<\/pre>\n
                      NB! Saab kirja panna ka pikema j\u00e4rgnevuse jada, n\u00e4iteks l\u00f5igule, mis j\u00e4rgneb <h2><\/code> pealkirjale, mis omakorda j\u00e4rgneb otse peakirjale <h1><\/code> ning vajadusel veelgi pikemalt!<\/span>
                      \nN\u00e4iteks:<\/p>\n
                      h1+h2+p {\r\n  font-size: 20px;\r\n}<\/pre>\n
                      Sarnaselt saab viidata k\u00f5ikidele kindlat t\u00fc\u00fcpi elementidele, millele eelneb konkreetne element. Selektor kirjutatakse siis kujul: esimeneelement~j\u00e4rgnevelement<\/em><\/p>\n
                      <\/code>N\u00e4iteks loome kujunduse k\u00f5igile l\u00f5ikudele, millele on eelnenud kolmanda taseme pealkiri (HTML element <h3><\/code>):<\/p>\n
                      h3~p {\r\n  color: gray;\r\n}<\/pre>\n
                      Atribuudi selektorid<\/h1>\n
                      CSS3 v\u00f5imaldab kasutada selektoreid vastavalt HTML elementide atribuutidele, nende v\u00e4\u00e4rtustele jne. Sellisel juhul kirjutatakse selektor tervenisti kandilistesse sulgudesse: [atribuut_ja_selle_v\u00e4\u00e4rtus_vms]<\/em><\/p>\n
                        \n
                      • <\/code>Kujundust v\u00f5ib luua vastavalt m\u00f5ne atribuudi olemasolule.<\/li>\n<\/ul>\n
                        N\u00e4iteks loome kujunduse k\u00f5igile elementidele, millel on olemas atribuut \u201elang<\/em>\u201c:<\/p>\n
                        [lang] {\r\n  font-famly: verdana;\r\n}<\/pre>\n
                          \n
                        • Kujunduse saab luua vastavalt mingi atribuudi v\u00e4\u00e4rtusele.<\/li>\n<\/ul>\n
                          N\u00e4iteks loome kujunduse k\u00f5igile neile elementidele, mille atribuudi \u201etitle<\/em>\u201c v\u00e4\u00e4rtus on \u201eselgitus\u201c:<\/p>\n
                          [title=selgitus] {\r\n  font-style: italic;\r\n}<\/pre>\n
                          Atribuudi v\u00e4\u00e4rtuse kasutamisel v\u00f5ib viidata ka mingile osale v\u00e4\u00e4rtusest (string)!<\/p>\n
                            \n
                          • \n
                              \n
                            • [atribuut^=string]<\/code><\/em> \u2013 viitab elemendile, mille atribuudi v\u00e4\u00e4rtus algab vastava stringiga;<\/li>\n
                            • [atribuut$=string]<\/code><\/em> \u2013 viitab elemendile, mille atribuudi v\u00e4\u00e4rtus l\u00f5ppeb vastava stringiga;<\/li>\n
                            • [atribuut*=string]<\/code><\/em> \u2013 viitab elemendile, mille atribuudi v\u00e4\u00e4rtus sisaldab vastavat stringi.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
                              NB! String tuleb selektoris paigutada jutum\u00e4rkide vahele!<\/span><\/p>\n
                              N\u00e4iteks loome stiili k\u00f5igile elementidele, mille atribuudi \u201esrc\u201c v\u00e4\u00e4rtus sisaldab stringi \u201eramkool.edu.ee\u201c:<\/p>\n
                              [src*=\"ramkool.edu.ee\"] {\r\n  font-family: courier;\r\n}\r\n<\/pre>\n
                                \n
                              • Eraldi on olemas keeleatribuudiga seotud pseudoklass :lang<\/em>.<\/li>\n<\/ul>\n
                                N\u00e4iteks loome kujunduse k\u00f5igile elementidele <h2><\/code>, millel kasutatakse inglise keelt:<\/p>\n
                                h2:lang(en) {\r\n  font-style: italic;\r\n}<\/pre>\n
                                Pseudoklassid ja pseudoelemendid<\/h1>\n
                                Pseudoklasse ja pseudoelemente kasutatakse veebilehe elementidele veelgi paindlikumalt stiilide m\u00e4\u00e4ramiseks.<\/p>\n
                                Pseudoklassid<\/h3>\n
                                Pseudoklasse kasutatakse veebilehe elementide erinevate olekute (state<\/em>) defineerimiseks. Nende puhul lisatakse tavap\u00e4rasele selektorile kooloni j\u00e4rele veel nn pseudonimi j\u00e4rgmisel moel: selektor:pseudonimi{kujundus}<\/code><\/p>\n
                                <\/code>K\u00f5ige tuntumad pseudoelemendid on ilmselt linkidega seotud:<\/p>\n
                                  \n
                                • a:link <\/em>\u2013 k\u00fclastamata link;<\/li>\n
                                • a:visited<\/em> \u2013 k\u00fclastatud link;<\/li>\n
                                • a:hover<\/em> \u2013 hiirekursor on liikunud lingi peale;<\/li>\n
                                • a:active<\/em> \u2013 hiire vasak nupp on lingil alla vajutatud (kl\u00f5psamine).<\/li>\n<\/ul>\n
                                  N\u00e4iteks:<\/p>\n
                                  a:hover {\r\n  font-weight: bold;\r\n}<\/pre>\n
                                  NB! Nendest mainitutest saab pseudonime :hover <\/em>kasutada ka teistel elementidel ning sedasi luua eriefekte hiirega elementidele liikumisel.<\/span><\/p>\n
                                  Olemas on ka pseudoklass, mis viitab mingi lingi sihtelemendile (target<\/em>), mis on ka hetkel aktiivne. Selleks on pseudoklass :target<\/em>. N\u00e4iteks kujundame elemendi nimega \u201eportree\u201c, mis oli klikitud URL-i v\u00e4\u00e4rtuseks ja mis on aktiivne:<\/p>\n
                                  #portree:target {\r\n  background-color: yellow;\r\n}<\/pre>\n
                                  \u00dcks huvitav pseudoklass t\u00e4histab k\u00f5iki nimetatud elemendist erinevaid elemente \u2013 selleks on :not<\/em> pseudoklass. .<\/p>\n
                                  NB! N\u00e4iteks kasutades selektorit :not(p)<\/em> selekteeritakse k\u00f5ik elemendid peale <p><\/code> elemendi, kaasaarvatud <html><\/code> ja <body><\/code>.<\/span><\/p>\n
                                  :not(p) {\r\n  text-decoration: underline;\r\n}<\/pre>\n
                                  Kogu veebilehe juurelemendi (root<\/em>) jaoks on pseudoklass :root<\/em>. HTML dokumendi puhul on root<\/em> elemendiks <html><\/code> element:<\/p>\n
                                  :root {\r\n  background-color: blue;\r\n}<\/pre>\n
                                  T\u00fchja elemendi jaoks on pseudoklass :empty<\/code>.<\/em> N\u00e4iteks loome kujunduse t\u00fchjadele tabeli lahtritele:<\/p>\n
                                  td:empty {\r\n  background-color: pink;\r\n}<\/pre>\n
                                  \"Tabel
                                  Tulemus: tabeli t\u00fchjad lahtrid on roosa taustaga<\/figcaption><\/figure>\n
                                  Kasutaja sisendiga seotud pseudoklassid<\/h2>\n
                                  Osa pseudoklasse on sellised, mida saab kasutada vaid nende elementide puhul, mis v\u00f5imaldavad kasutajal midagi sisestada, n\u00e4iteks klaviatuurilt.<\/p>\n
                                    \n
                                  • Kujundust saab luua elemendile, millel on fookus, selleks kasutatakse pseudonime :focus<\/em>. N\u00e4iteks:\n
                                    input:focus {\r\n  background-color: #FFDDDD;\r\n}<\/pre>\n<\/li>\n
                                  • V\u00f5ib l\u00e4htuda sellest, kas <input><\/code> element on aktiveeritud (enabled<\/em>), selleks on pseudonimi :enabled<\/em>. N\u00e4iteks:\n
                                    input:enabled {\r\n  font-weight: bold;\r\n}<\/pre>\n
                                     <\/li>\n
                                  • Vastupidiselt v\u00f5ib kasutada pseudonime :disabled<\/em>, mis t\u00e4histab neid <input><\/code><\/span> elemente, mis on deaktiveeritud. N\u00e4iteks:\n
                                    input:disabled {\r\n  color: gray;\r\n}<\/pre>\n
                                     <\/li>\n
                                  • V\u00f5ib kujundada neid <input> elemente, mis on m\u00e4rkeruutudena m\u00e4rgitud, selleks on pseudonimi :checked<\/em>. N\u00e4iteks:\n
                                    input:checked {\r\n  background-color: #DDDDDD;\r\n}<\/pre>\n<\/li>\n<\/ul>\n
                                    Elementide j\u00e4rjestusega seotud pseudoklassid<\/span><\/h2>\n
                                    Pseudoklasside abil saab kujundada ka elemente vastavalt nende asukohale neid sisaldavas elemendis (parent<\/em>).<\/p>\n
                                      \n
                                    • Kindlat t\u00fc\u00fcpi elementi, mis on esimene t\u00fctarelement (child<\/em>) teda sisaldavas elemendis saab kujundada pseudoklassi :first-child<\/em> abil.
                                      \nN\u00e4iteks:<\/p>\n
                                      h2:first-child {\r\n  background-color: white;\r\n}<\/pre>\n
                                       <\/li>\n
                                    • Kindlat t\u00fc\u00fcpi elementi, mis on viimane t\u00fctarelement (child<\/em>) teda sisaldavas elemendis <\/span>saab kujundada pseudoklassi :last-child<\/em> abil.<\/span>N\u00e4iteks muudame l\u00f5igu, mis on viimane t\u00fctarelement, laiust:\n
                                      p:last-child {\r\n  width: 50%;\r\n}<\/pre>\n
                                       <\/li>\n
                                    • Esimese kindlat t\u00fc\u00fcpi elemendi jaoks teda sisaldavas elemendis (parent<\/em>) on <\/span>pseudoklass :first-of-type<\/em>.<\/span>N\u00e4iteks m\u00e4\u00e4rame mingis elemendis sisalduvale esimesele l\u00f5igule taandrea:\n
                                      p:first-of-type {\r\n text-indent: 20px;\r\n}<\/pre>\n
                                       <\/li>\n
                                    • Viimase kindlat t\u00fc\u00fcpi elemendi jaoks teda sisaldavas elemendis (parent<\/em>) on <\/span>pseudoklass :last-of-type<\/em>.<\/span>N\u00e4iteks muudame mingis elemendis sisalduva viimase sektsiooni raamjoone alumised nurgad \u00fcmaraks:\n
                                      section:last-of-type {\r\n  border-bottom-left-radius: 20px;\r\n  border-bottom-right-radius: 20px;\r\n}<\/pre>\n
                                       <\/li>\n
                                    • Lugedes algusest saab kindlal positsioonil asuvale t\u00fctarelemendile (child<\/em>) viidata <\/span>pseudoklassiga :nth-child<\/em>.<\/span>N\u00e4iteks loome kujunduse l\u00f5igule, mis on kolmas t\u00fctarelement:\n
                                      p:nth-child(3) {\r\n  font-family: arial;\r\n}<\/pre>\n
                                       <\/li>\n
                                    • Elementidele saab viidata ka tagantpoolt lugema hakates, siis kasutatakse pseudoklassi <\/span>:nth-last-child(n)<\/em>.<\/span>N\u00e4iteks loome kujunduse l\u00f5igule, mis on tagantpoolt kolmas t\u00fctarelement:\n
                                      p:nth-last-child(3) {\r\n  font-family: arial;\r\n}<\/pre>\n
                                       <\/li>\n
                                    • Sarnaselt saab viidata kindlat t\u00fc\u00fcpi elementidele nii eestpoolt kui ka tagantpoolt <\/span>lugedes, selleks on pseudoklassid :nth-of-type(n)<\/em> ja :nth-last-of-type(n)<\/em>.<\/span>N\u00e4iteks loome kujunduse tagantpoolt teisele sektsioonile:\n
                                      section:nth-last-of-type {\r\n  border-width: 10px;\r\n}<\/pre>\n<\/li>\n
                                    • J\u00e4rjekorranumbritena saab kasutada ka viidet paaris v\u00f5i paaritutele arvudele vastavalt even v\u00f5i odd.
                                      \nN\u00e4iteks:<\/p>\n
                                      p:nth-child(odd) {\r\n  font-family: arial;\r\n}<\/pre>\n<\/li>\n<\/ul>\n
                                      Ainsa t\u00fctarelemendi pseudoklassid<\/h2>\n
                                        \n
                                      • Elemendile, mis on ainsaks t\u00fctarelemendiks mingis elemendis, m\u00e4\u00e4ratakse kujundus kasutades pseudoklassi :only-child<\/em>.
                                        \nN\u00e4iteks m\u00e4\u00e4rame ainsaks t\u00fctarelemendiks olevale elemendile <div><\/code> raamjoone:<\/p>\n
                                        div:only-child {\r\n  border: 20px dashed blue;\r\n}<\/pre>\n
                                         <\/li>\n
                                      • Elemendile, mis on ainus vastavat t\u00fc\u00fcpi t\u00fctarelement, m\u00e4\u00e4ratakse kujundus kasutades <\/span>pseudoelementi :only-of-type<\/em>;<\/span><\/li>\n<\/ul>\n
                                        Pseudoelemendid<\/h2>\n
                                        Pseudoelemendid viitavad veebilehe elemendi mingisugusele osale.<\/p>\n
                                        Pseudoelementide puhul on CSS3 puhul v\u00f5etud kasutusele kirjaviis, kus on kaks koolonit. Eesm\u00e4rgiks on r\u00f5hutada pseudoklasside ja pseudoelementide erinevust.<\/p>\n
                                        selektor::pseudoelement{kujundus}<\/em><\/p>\n
                                        Esimese tekstirea ja t\u00e4hem\u00e4rgi pseudoelemendid<\/h2>\n
                                        Teksti kujundamisel saab appi v\u00f5tta pseudoelemendid , mis viitavad esimesele t\u00e4hem\u00e4rgile v\u00f5i esimesele tekstireale. Nendeks pseudoelementideks on: ::first-line<\/em> ja ::first-letter<\/em>.<\/p>\n
                                        N\u00e4iteks loome kujunduse k\u00f5ikide l\u00f5ikude esimestele t\u00e4hem\u00e4rkidele:<\/p>\n
                                        p::first-letter {\r\n  font-size: xx-large;\r\n  color: red;\r\n}<\/pre>\n
                                        V\u00f5i loome kujunduse mingisuguse suure ploki esimese l\u00f5igu esimesele t\u00e4hem\u00e4rgile:<\/p>\n
                                        p:first-of-type::first-letter {\r\n  font-size: xx-large;\r\n  color: red;\r\n}<\/pre>\n
                                        \"l\u00f5igu
                                        Esimese l\u00f5igu esimene t\u00e4ht on kujundatud<\/figcaption><\/figure>\n
                                        Pseudoelemendid lisamaks sisu elementide ette ja j\u00e4rele<\/h2>\n
                                        Selleks, et lisada mingit kindlat sisu m\u00e4\u00e4ratud elementide ette v\u00f5i j\u00e4rele on pseudoelemendid ::before<\/em> ja ::after<\/em>.<\/p>\n
                                        Sisu lisatakse omadusega content<\/em>. Sellel omadusel on j\u00e4rgmised v\u00f5imalikud v\u00e4\u00e4rtused:<\/p>\n
                                          \n
                                        • none<\/em> \u2013 ei lisata mingit sisu;<\/li>\n
                                        • normal<\/em> \u2013 (vaikev\u00e4\u00e4rtus) seab selle omaduse v\u00e4\u00e4rtuse vaikimisi kasutatavale v\u00e4\u00e4rtusele \u201enone<\/em>\u201c;<\/li>\n
                                        • counter<\/em> \u2013 lisab sisule loenduri v\u00e4\u00e4rtuse (loenduri nimetus tuleb lisada sulgudesse);<\/li>\n
                                        • attr<\/em> (atribudinimi) \u2013 lisab sisule elemendi vastava atribuudi v\u00e4\u00e4rtuse;<\/li>\n
                                        • string<\/em> \u2013 lisab sisule m\u00e4\u00e4ratud stringi (teksti jutum\u00e4rkides);<\/li>\n
                                        • open-quote<\/em> \u2013 lisab sisule alustava jutum\u00e4rgi;<\/li>\n
                                        • close-quote<\/em> \u2013 lisab sisule l\u00f5petava jutum\u00e4rgi;<\/li>\n
                                        • no-open-quote<\/em> \u2013 eemaldab alustava jutum\u00e4rgi;<\/li>\n
                                        • no-close-quote<\/em> \u2013 eemaldab l\u00f5petava jutum\u00e4rgi;<\/li>\n
                                        • url <\/em>(aadress) \u2013 lisab sisule mingi meedia (pilt, heli- v\u00f5i videoklipp);<\/li>\n
                                        • initial<\/em> \u2013 seab selle omaduse esialgsele v\u00e4\u00e4rtusele;<\/li>\n
                                        • inherit<\/em> \u2013 loend p\u00e4rib vastava omaduse teda sisaldavalt elemendilt (parent<\/em>).<\/li>\n<\/ul>\n
                                          N\u00e4iteks lisame pealkirjadele <h2><\/code> ette s\u00f5na \u201ePeat\u00fckk\u201c ning jutum\u00e4rkide alguse ning <h2><\/code> j\u00e4rele jutum\u00e4rkide l\u00f5pu:<\/p>\n
                                          h2::before {\r\n  content: \"Peat\u00fckk \" open-quote;\r\n}\r\nh2::after {\r\n  content: close-quote;\r\n}\r\n<\/pre>\n
                                          Kasutaja poolt valitud osa<\/h2>\n
                                          \u00dcks pseudoelement viitab veebilehe mingi elemendi kasutaja poolt valitud (selected<\/em>) osale. Selleks on pseudoelement ::selection<\/em>.
                                          \nN\u00e4iteks:<\/p>\n
                                          p::selection {\r\n  font-style: italic;\r\n}<\/pre>\n","protected":false},"author":1,"menu_order":6,"template":"","meta":{"_mi_skip_tracking":false,"pb_show_title":"on","pb_short_title":"","pb_subtitle":"","pb_authors":[],"pb_section_license":""},"chapter-type":[],"contributor":[],"license":[],"part":29,"_links":{"self":[{"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/pressbooks\/v2\/chapters\/286"}],"collection":[{"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/pressbooks\/v2\/chapters"}],"about":[{"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/wp\/v2\/types\/chapter"}],"author":[{"embeddable":true,"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/wp\/v2\/users\/1"}],"version-history":[{"count":7,"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/pressbooks\/v2\/chapters\/286\/revisions"}],"predecessor-version":[{"id":446,"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/pressbooks\/v2\/chapters\/286\/revisions\/446"}],"part":[{"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/pressbooks\/v2\/parts\/29"}],"metadata":[{"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/pressbooks\/v2\/chapters\/286\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/wp\/v2\/media?parent=286"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/pressbooks\/v2\/chapter-type?post=286"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/wp\/v2\/contributor?post=286"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/wp\/v2\/license?post=286"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}