{"id":218,"date":"2020-03-02T19:38:23","date_gmt":"2020-03-02T19:38:23","guid":{"rendered":"https:\/\/ramk.ee\/opikud\/veebidisain\/?post_type=chapter&#038;p=218"},"modified":"2020-03-11T13:03:45","modified_gmt":"2020-03-11T13:03:45","slug":"css-selektorid","status":"publish","type":"chapter","link":"https:\/\/ramk.ee\/opikud\/veebidisain\/chapter\/css-selektorid\/","title":{"rendered":"CSS selektorid"},"content":{"raw":"CSS selektoreid kasutatakse soovitud elementide leidmiseks (selekteerimiseks) veebilehel.\r\n\r\nSelektoreid saab jaotada viite erinevasse kategooriasse:\r\n<ul>\r\n \t<li>Lihtsad selektorid (rakendub elementidele olenevalt elemendi nimest, <em>id<\/em>'st v\u00f5i <em>class<\/em>'ist)<\/li>\r\n \t<li>Kombineeritud selektorid (selekteeri elemente vastavalt nendevahelisele suhtele)<\/li>\r\n \t<li>Pseudoklass selektorid (selekteeri elemente vastavalt nende olekule)<\/li>\r\n \t<li>Pseudoelement selektorid (selekteeri ja stiliseeri \u00fcks osa elemendist)<\/li>\r\n \t<li>Atribuudi selektorid (selekteeri ja stiliseeri elemente vastavalt nende atribuutidele v\u00f5i atribuutide v\u00e4\u00e4rtustele)<\/li>\r\n<\/ul>\r\n<h1>K\u00f5ikidele elementidele korraga viitamine<\/h1>\r\nVahel harva v\u00f5ib vaja minna ka v\u00f5imalust luua kujundus korraga k\u00f5igile HTML elementidele, sellisel juhul on selektoriks \u201e*\u201c (t\u00e4rn).\r\n\r\n<strong>N\u00e4iteks:<\/strong>\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">* {\r\n  color: black;\r\n}<\/pre>\r\nAntud juhul muudetakse k\u00f5ikide HTML elementide v\u00e4rv mustaks. Tavaliselt viidatakse k\u00f5igile mingi elemendi sees olevatele t\u00fctarelementidele.\r\n<h1>Elemendi selekteerimine<\/h1>\r\nKindlale elemendile kujunduse loomiseks kasutame soovitud elemendi nime. N\u00e4iteks j\u00e4rgneva koodiga saame muuta k\u00f5iki <code>&lt;h1&gt;<\/code> suuruses pealkirjad punaseks:\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">h1 {\r\n  color: red;\r\n}<\/pre>\r\n<h1>Id selekteerimine<\/h1>\r\nKujunduse saab luua ka kindlat identifikaatorit omavale objektile (mille algusm\u00e4rgendis on <em>id<\/em> atribuut). Kindla <em>id<\/em>-ga elemendi selekteerimiseks kirjutame s\u00fcmboli #, millele j\u00e4rgneb <em>id<\/em> v\u00e4\u00e4rtus: <code>#atribuudi_id_v\u00e4\u00e4rtus {kujundus}<\/code>.\r\n\r\n<strong>N\u00e4iteks:<\/strong>\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">#suur {\r\n  font-size: 20px;\r\n}<\/pre>\r\n<span class=\"nb\">NB! Elemendi <em>id<\/em> atribuudi j\u00e4rgi m\u00e4\u00e4ratud kujundus on k\u00f5rgema prioriteediga kui n\u00e4iteks klass!\r\nNB! Kujunduse m\u00e4\u00e4ramisel tuleks eelistada klasside kasutamist!\r\nNB! \u00dchegi HTML elemendi <em>id<\/em> atribuudi v\u00e4\u00e4rtust ei tohi alustada numbriga!<\/span>\r\n\r\nSarnaselt v\u00f5ib luua kindlat t\u00fc\u00fcpi ja kindlat identifikaatorit omavale objektile. N\u00e4iteks kujundus tekstil\u00f5igule (HTML element <code>&lt;p&gt;<\/code>), millel nimeks \"oluline\":\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">p#oluline {\r\n text-align: center;\r\n color: red;\r\n}<\/pre>\r\n<h1>Klassi selekteerimine<\/h1>\r\nSarnaselt <em>id<\/em> atribuudile kujunduse loomisega saame kujundusi luua ka klassi atribuute omavatele elementidele. Sellisel juhul kasutame punkti, millele j\u00e4rgneb klassi v\u00e4\u00e4rtus: <code>.atribuudi_klass_v\u00e4\u00e4rtus {kujundus}<\/code>.\r\n\r\nN\u00e4iteks muudame k\u00f5ik elemendid, millel on klassiatribuut v\u00e4\u00e4rtusega kollane, kollaseks.\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">.kollane { \r\n  color: yellow; \r\n}<\/pre>\r\nSamuti v\u00f5ime me selekteerida ainult kindlaid elemente mis omavad kindlat id v\u00f5i klassi v\u00e4\u00e4rtust.\r\n\r\nN\u00e4iteks soovime selekteerida ainult teise taseme pealkirju, milledele on m\u00e4\u00e4ratud klass \"keskel\" (<code>&lt;h2 class=\"keskel\"&gt;Pealkiri&lt;\/h2&gt;<\/code>).\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">h2.keskel{\r\n  color: red;\r\n}<\/pre>\r\n<h1>Mitu selektorit korraga<\/h1>\r\n\u00dchesugust kujundust saab m\u00e4\u00e4rata korraga mitmele erinevale veebilehe elemendile! Selleks tuleb soovitud HTML elemendid \u00fcheks selektoriks grupeerida ehk nad lihtsalt komadega eraldatult \u00fcles loetleda.\r\n\r\n<strong>N\u00e4iteks:<\/strong>\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">p, h1, h2, h3, h4, h5 {\r\n  text-align:center;\r\n  font-family: arial;\r\n  color:red\r\n}<\/pre>","rendered":"<p>CSS selektoreid kasutatakse soovitud elementide leidmiseks (selekteerimiseks) veebilehel.<\/p>\n<p>Selektoreid saab jaotada viite erinevasse kategooriasse:<\/p>\n<ul>\n<li>Lihtsad selektorid (rakendub elementidele olenevalt elemendi nimest, <em>id<\/em>&#8216;st v\u00f5i <em>class<\/em>&#8217;ist)<\/li>\n<li>Kombineeritud selektorid (selekteeri elemente vastavalt nendevahelisele suhtele)<\/li>\n<li>Pseudoklass selektorid (selekteeri elemente vastavalt nende olekule)<\/li>\n<li>Pseudoelement selektorid (selekteeri ja stiliseeri \u00fcks osa elemendist)<\/li>\n<li>Atribuudi selektorid (selekteeri ja stiliseeri elemente vastavalt nende atribuutidele v\u00f5i atribuutide v\u00e4\u00e4rtustele)<\/li>\n<\/ul>\n<h1>K\u00f5ikidele elementidele korraga viitamine<\/h1>\n<p>Vahel harva v\u00f5ib vaja minna ka v\u00f5imalust luua kujundus korraga k\u00f5igile HTML elementidele, sellisel juhul on selektoriks \u201e*\u201c (t\u00e4rn).<\/p>\n<p><strong>N\u00e4iteks:<\/strong><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">* {\r\n  color: black;\r\n}<\/pre>\n<p>Antud juhul muudetakse k\u00f5ikide HTML elementide v\u00e4rv mustaks. Tavaliselt viidatakse k\u00f5igile mingi elemendi sees olevatele t\u00fctarelementidele.<\/p>\n<h1>Elemendi selekteerimine<\/h1>\n<p>Kindlale elemendile kujunduse loomiseks kasutame soovitud elemendi nime. N\u00e4iteks j\u00e4rgneva koodiga saame muuta k\u00f5iki <code>&lt;h1&gt;<\/code> suuruses pealkirjad punaseks:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">h1 {\r\n  color: red;\r\n}<\/pre>\n<h1>Id selekteerimine<\/h1>\n<p>Kujunduse saab luua ka kindlat identifikaatorit omavale objektile (mille algusm\u00e4rgendis on <em>id<\/em> atribuut). Kindla <em>id<\/em>-ga elemendi selekteerimiseks kirjutame s\u00fcmboli #, millele j\u00e4rgneb <em>id<\/em> v\u00e4\u00e4rtus: <code>#atribuudi_id_v\u00e4\u00e4rtus {kujundus}<\/code>.<\/p>\n<p><strong>N\u00e4iteks:<\/strong><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">#suur {\r\n  font-size: 20px;\r\n}<\/pre>\n<p><span class=\"nb\">NB! Elemendi <em>id<\/em> atribuudi j\u00e4rgi m\u00e4\u00e4ratud kujundus on k\u00f5rgema prioriteediga kui n\u00e4iteks klass!<br \/>\nNB! Kujunduse m\u00e4\u00e4ramisel tuleks eelistada klasside kasutamist!<br \/>\nNB! \u00dchegi HTML elemendi <em>id<\/em> atribuudi v\u00e4\u00e4rtust ei tohi alustada numbriga!<\/span><\/p>\n<p>Sarnaselt v\u00f5ib luua kindlat t\u00fc\u00fcpi ja kindlat identifikaatorit omavale objektile. N\u00e4iteks kujundus tekstil\u00f5igule (HTML element <code>&lt;p&gt;<\/code>), millel nimeks &#8220;oluline&#8221;:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">p#oluline {\r\n text-align: center;\r\n color: red;\r\n}<\/pre>\n<h1>Klassi selekteerimine<\/h1>\n<p>Sarnaselt <em>id<\/em> atribuudile kujunduse loomisega saame kujundusi luua ka klassi atribuute omavatele elementidele. Sellisel juhul kasutame punkti, millele j\u00e4rgneb klassi v\u00e4\u00e4rtus: <code>.atribuudi_klass_v\u00e4\u00e4rtus {kujundus}<\/code>.<\/p>\n<p>N\u00e4iteks muudame k\u00f5ik elemendid, millel on klassiatribuut v\u00e4\u00e4rtusega kollane, kollaseks.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">.kollane { \r\n  color: yellow; \r\n}<\/pre>\n<p>Samuti v\u00f5ime me selekteerida ainult kindlaid elemente mis omavad kindlat id v\u00f5i klassi v\u00e4\u00e4rtust.<\/p>\n<p>N\u00e4iteks soovime selekteerida ainult teise taseme pealkirju, milledele on m\u00e4\u00e4ratud klass &#8220;keskel&#8221; (<code>&lt;h2 class=\"keskel\"&gt;Pealkiri&lt;\/h2&gt;<\/code>).<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">h2.keskel{\r\n  color: red;\r\n}<\/pre>\n<h1>Mitu selektorit korraga<\/h1>\n<p>\u00dchesugust kujundust saab m\u00e4\u00e4rata korraga mitmele erinevale veebilehe elemendile! Selleks tuleb soovitud HTML elemendid \u00fcheks selektoriks grupeerida ehk nad lihtsalt komadega eraldatult \u00fcles loetleda.<\/p>\n<p><strong>N\u00e4iteks:<\/strong><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">p, h1, h2, h3, h4, h5 {\r\n  text-align:center;\r\n  font-family: arial;\r\n  color:red\r\n}<\/pre>\n","protected":false},"author":1,"menu_order":5,"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\/218"}],"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\/218\/revisions"}],"predecessor-version":[{"id":445,"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/pressbooks\/v2\/chapters\/218\/revisions\/445"}],"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\/218\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/wp\/v2\/media?parent=218"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/pressbooks\/v2\/chapter-type?post=218"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/wp\/v2\/contributor?post=218"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/wp\/v2\/license?post=218"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}