{"id":439,"date":"2021-04-24T20:46:31","date_gmt":"2021-04-24T18:46:31","guid":{"rendered":"http:\/\/dziewczynanafroncie.pl\/?p=439"},"modified":"2021-04-25T13:09:11","modified_gmt":"2021-04-25T11:09:11","slug":"css-pseudo-klasy","status":"publish","type":"post","link":"https:\/\/dziewczynanafroncie.pl\/css-pseudo-klasy\/","title":{"rendered":"CSS &#8211; pseudo klasy"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Ulepszamy wiadomo\u015bci z selektor\u00f3w CSS<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">W normalnym przebiegu przep\u0142ywu dokumentu style CSS s\u0105 dodawane na podstawie ich pozycji w drzewie DOM. Jednak czasami model ten nie jest wystarczaj\u0105cy, aby sprosta\u0107 naszym potrzeb\u0105 . Tutaj z pomoc\u0105 przychodz\u0105 nam <strong>pseudo-klasy<\/strong>. S\u0105 powi\u0105zane z elementami w spos\u00f3b odmienny, ni\u017c przynale\u017cno\u015b\u0107 po ich nazwie, atrybutach czy zawarto\u015bci. W skr\u00f3cie ujmuj\u0105c nie s\u0105 ustalane na podstawie drzewa dokumentu.<\/p>\n\n\n\n\n\n\n\n<p class=\"wp-block-paragraph\">W jednym z poprzednich artyku\u0142\u00f3w mogli\u015bcie dowiedzie\u0107 si\u0119 wi\u0119cej o trzech typach selektor\u00f3w wyst\u0119puj\u0105cych w CSS:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>generyczne<\/strong> gdzie element p nawi\u0105zuje do elementu HTML : <code>&lt;p&gt;<\/code><\/li><li><strong>klasy<\/strong> &#8211; gdzie oznaczenie .dnf w CSS nawi\u0105zuje do klasy o nazwie dnf :  <code>class=&quot;dnf&quot;<\/code> w kodzie HTML<\/li><li><strong>id<\/strong> &#8211; gdzie #dnf w CSS nawi\u0105zuje do identyfikatora o nazwie dnf  <code>id=&quot;dnf&quot;<\/code> w kodzie HTML<br> <\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Wszystkie wymienione wy\u017cej selektory mog\u0105 posiada\u0107 <strong>pseudo-klasy<\/strong> kt\u00f3re s\u0105 z nimi zwi\u0105zane. Pseudo-klasa <\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>definiuje okre\u015blony <strong>stan<\/strong> elementu<\/li><li>jest s\u0142owem kluczowym zaczynaj\u0105cym si\u0119 od dwukropka <code>:<\/code><\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">#Sk\u0142ania<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Pseudo-klasa nie mo\u017ce istnie\u0107 samodzielnie. Musi by\u0107 przymocowany do selektora. Pseudo-klasa definiuje tylko okre\u015blony stan tego selektora.<br><br>Jej sk\u0142adnia wygl\u0105da nast\u0119puj\u0105co:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"css\" class=\"language-css line-numbers\"> .selektor:pseudo-klasa{ }<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Nie ma miejsca mi\u0119dzy selektorem a pseudo-klas\u0105, co oznacza\u0142oby, \u017ce s\u0105 one ze sob\u0105 po\u0142\u0105czone.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">:hover<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Na przyk\u0142ad, cz\u0119sto u\u017cywan\u0105 pseudoklas\u0105 jest <code>:hover<\/code>, kt\u00f3ra zastosuje styl CSS po <strong>najechaniu <\/strong>kursorem na element docelowy. Przetestujmy to na linkach.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"css\" class=\"language-css line-numbers\">a{ color: blue;}\na:hover{ color: red;}<\/code><\/pre>\n\n\n\n<div class=\"result\">\n<p> \n<style>\na.example-hover{ color: blue !important;text-decoration: underline !important;}\na.example-hover:hover{ color: red !important;}\n<\/style>\nNajedz na <a class=\"example-hover\">ten link<\/a> aby zmieni\u0107 kolor na czerwony\n<\/p>\n<\/div> \n\n\n\n<p class=\"wp-block-paragraph\"><br>Pierwsza linia okre\u015bla, jak powinny wygl\u0105da\u0107 wszystkie elementy <code>&lt;a&gt;<\/code> HTML (kolor niebieski). Druga linia definiuje, jak <code>&lt;a&gt;<\/code> powinien wygl\u0105da\u0107 po <strong>najechaniu <\/strong>kursorem (<strong>czerwony<\/strong>).<br>Druga linia dotyczy <strong>tych samych element\u00f3w HTML<\/strong>, ale tylko wtedy, gdy dzieje si\u0119 co\u015b konkretnego (w tym przypadku jest to najechanie kursora).<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">:visited<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"css\" class=\"language-css line-numbers\">a{ color: dodgerblue;}\na:visited{ color: rebeccapurple;}<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"markup\" class=\"language-markup line-numbers\">&lt;a href=\"https:\/\/www.google.com\"&gt;Google&lt;\/a&gt;\n&lt;a href=\"https:\/\/twitter.com\"&gt;Twitter&lt;\/a&gt;\n&lt;a href=\"https:\/\/www.facebook.com\"&gt;Facebook&lt;\/a&gt; \n&lt;a href=\"https:\/\/www.mozilla.org\"&gt;Mozilla&lt;\/a&gt; \n&lt;a href=\"https:\/\/marksheet.io\/visited.html\"&gt;MarkSheet&lt;\/a&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Stosowanie innego dla odwiedzanych link\u00f3w jest cz\u0119sto pomijane, ale jest przydatne dla u\u017cytkownik\u00f3w przegl\u0105daj\u0105cych list\u0119 wynik\u00f3w. Z \u0142atwo\u015bci\u0105 pomaga im wyobrazi\u0107 sobie, gdzie ju\u017c byli.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">:focus<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Ta pseudoklasa ma miejsce, gdy fokus jest na elemencie HTML. Jest to szczeg\u00f3lnie przydatne w przypadku danych wej\u015bciowych HTML.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"css\" class=\"language-css line-numbers\">.form-input{ \n   border: 2px solid grey !important; \n   padding: 5px !important;\n}\n.form-input:focus{ \n   background: lightyellow !important;\n   border-color: #80bdff !important; \n   outline: none !important;\n}<\/code><\/pre>\n\n\n\n<div class=\"result\">\n<p>\n<style>\n.example-focus.form-control{ \n   border: 2px solid grey !important; \n   padding: 5px !important;\n}\n.example-focus.form-control:focus{ \n   background: lightyellow !important;\n   border-color: #80bdff !important; \n   outline: none !important;\n}\n<\/style>\n<input class=\"example-focus form-control\" placeholder=\"Wprowad\u017a imi\u0119\">\n<\/p>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><div class='block-alert block-alert-info'> Regu\u0142a <code>outline:none<\/code> usuwa po\u015bwiat\u0119 z kontrolki <\/div><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">:first-child and :last-child<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Te pseudoklasy s\u0105 powi\u0105zane z hierarchi\u0105 HTML. Celuj\u0105 w elementy HTML w zale\u017cno\u015bci od kolejno\u015bci, w jakiej pojawiaj\u0105 si\u0119 w kodzie.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"markup\" class=\"language-markup line-numbers\">&lt;ul>\n   &lt;li>Jeden&lt;\/li>\n   &lt;li>Dwa&lt;\/li>\n   &lt;li>Trzy&lt;\/li>\n   &lt;li>Cztery&lt;\/li>\n&lt;\/ul><\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"css\" class=\"language-css line-numbers\">li:first-child{ background: Tomato;}\nli:last-child{ background: SlateBlue;}<\/code><\/pre>\n\n\n\n<div class=\"result\">\n<p>\n<style>\nul.example li:first-child{ background: Tomato;}\nul.example li:last-child{ background: SlateBlue;}\n<\/style>\n<ul class=\"example\">\n   <li>Jeden<\/li>\n   <li>Dwa<\/li>\n   <li>Trzy<\/li>\n   <li>Cztery<\/li>\n<\/ul>\n<\/p>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Jak wida\u0107, \u017cadna klasa CSS nie jest stosowana do pierwszego i ostatniego <code>&lt;li&gt;<\/code> . Ich pozycja w hierarchii okre\u015bla, czy stosowana jest regu\u0142a CSS.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Gdyby\u015bmy dodali pi\u0105ty element listy i u\u017cywaj\u0105c tego samego kodu CSS, styl zmieni\u0142by si\u0119 automatycznie:<\/p>\n\n\n\n<div class=\"result\">\n<p>\n<ul class=\"example\">\n   <li>Jeden<\/li>\n   <li>Dwa<\/li>\n   <li>Trzy<\/li>\n   <li>Cztery<\/li>\n   <li>Pi\u0119\u0107<\/li>\n<\/ul>\n<\/p>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\">:nth-child<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Ta <strong>pseudo-klasa <\/strong>jest bardziej globaln\u0105 wersj\u0105: <code>first-child<\/code> i: <code>last-child<\/code>. Z: <code>nth-child<\/code>, mo\u017cesz obliczy\u0107, na kt\u00f3ry element potomny chcesz skierowa\u0107.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Na przyk\u0142ad, je\u015bli chcesz kierowa\u0107 reklamy na drugie dziecko, u\u017cyj: <code>nth-child (2)<\/code>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"css\" class=\"language-css line-numbers\">li:nth-child(2){ background: MediumSeaGreen;}<\/code><\/pre>\n\n\n\n<div class=\"result\">\n<p>\n<style>\nul.example2 li:nth-child(2){ background: MediumSeaGreen;}\n<\/style>\n<ul class=\"example2\">\n   <li>Jeden<\/li>\n   <li>Dwa<\/li>\n   <li>Trzy<\/li>\n   <li>Cztery<\/li>\n<\/ul>\n<\/p>\n<\/div>\n\n\n\n<h5 class=\"wp-block-heading\">odd and even<\/h5>\n\n\n\n<p class=\"wp-block-paragraph\">Chocia\u017c u\u017cycie liczby jest proste, polecenie: <code>nth-child<\/code> zawiera 2 s\u0142owa kluczowe:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><code>: nth-child (odd)<\/code> b\u0119dzie kierowa\u0107 na ka\u017cdy nieparzysty element<\/li><li><code>: nth-child (even)<\/code> b\u0119dzie kierowa\u0107 reklamy na ka\u017cdy parzysty element<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"css\" class=\"language-css line-numbers\">li:nth-child(odd){ background: gold;}<\/code><\/pre>\n\n\n\n<div class=\"result\">\n<p>\n<style>\nul.example3 li:nth-child(odd){ background: gold;}\n<\/style>\n<ul class=\"example3\">\n   <li>Jeden<\/li>\n   <li>Dwa<\/li>\n   <li>Trzy<\/li>\n   <li>Cztery<\/li>\n<\/ul>\n<\/p>\n<\/div>\n\n\n\n<h5 class=\"wp-block-heading\">Iterator n<\/h5>\n\n\n\n<p class=\"wp-block-paragraph\">Najpot\u0119\u017cniejszym aspektem: <code>nth-child<\/code> jest to, w jaki spos\u00f3b mo\u017ce kierowa\u0107 elementy na podstawie <strong>oblicze\u0144 <\/strong>za pomoc\u0105 s\u0142owa kluczowego <code>n<\/code>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Warto\u015b\u0107 <code>n<\/code> zwi\u0119ksza si\u0119 od zera <code>0<\/code> do <strong>liczby <\/strong>obecnych element\u00f3w podrz\u0119dnych.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A co, je\u015bli chcesz celowa\u0107 w co <strong>trzeci <\/strong>element?<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"css\" class=\"language-css line-numbers\">li:nth-child(3n){ background: hotpink;}<\/code><\/pre>\n\n\n\n<div class=\"result\">\n<p>\n<style>\nul.example4 li:nth-child(3n){ background: hotpink;}\n<\/style>\n<ul class=\"example4\">\n   <li>Jeden<\/li>\n   <li>Dwa<\/li>\n   <li>Trzy<\/li>\n   <li>Cztery<\/li>\n   <li>Pi\u0119\u0107<\/li>\n   <li>Sze\u015b\u0107<\/li>\n   <li>Siedem<\/li>\n<\/ul>\n<\/p>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">W naszym przypadku <code>n<\/code> zaczyna si\u0119 od <strong>zera <\/strong>i ko\u0144czy na <strong>sz\u00f3stej<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><div class='block-alert block-alert-info'> Komputery zaczynaj\u0105 liczy\u0107 od <strong>zera<\/strong>. A poniewa\u017c na naszej li\u015bcie jest siedem element\u00f3w, przejdziemy do sze\u015bciu, poniewa\u017c 0-1-2-3-4-5-6 reprezentuje <strong>siedem <\/strong>element\u00f3w.<\/div><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Mo\u017cesz przeczyta\u0107: nth-child (3n) jako \u201eSkieruj na ka\u017cdy element, kt\u00f3rego pozycja jest podzielna przez 3\u201d. W naszym przypadku dotyczy\u0142o to zar\u00f3wno trzeciej, jak i sz\u00f3stej pozycji listy:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><code>3 pomno\u017cone przez 0 <\/code> kt\u00f3rego iloczynem jest 0<\/li><li><code>3 pomno\u017cone przez 1<\/code> kt\u00f3rego wynikiem jest 3 element<\/li><li><code>3 pomno\u017cone przez 2<\/code> kt\u00f3rego wynikiem jest 6 element<\/li><\/ul>\n\n\n\n<h5 class=\"wp-block-heading\">n + 1<\/h5>\n\n\n\n<p class=\"wp-block-paragraph\">A co, je\u015bli chcesz kierowa\u0107 reklamy na pierwszy i co trzeci element p\u00f3\u017aniej?<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"css\" class=\"language-css line-numbers\">li:nth-child(3n+1){ background: limegreen;}<\/code><\/pre>\n\n\n\n<div class=\"result\">\n<p>\n<style>\nul#example5 li:nth-child(3n+1){ background: limegreen;}\n<\/style>\n<ul id=\"example5\">\n   <li>Jeden<\/li>\n   <li>Dwa<\/li>\n   <li>Trzy<\/li>\n   <li>Cztery<\/li>\n   <li>Pi\u0119\u0107<\/li>\n   <li>Sze\u015b\u0107<\/li>\n   <li>Siedem<\/li>\n<\/ul>\n<\/p>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><code>3n + 1<\/code> sk\u0142ada si\u0119 z dw\u00f3ch cz\u0119\u015bci:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><code>3n<\/code> wybiera co <strong>trzeci\u0105 <\/strong>pozycj\u0119<\/li><li><code>+1<\/code> <strong>przesuwa <\/strong>pocz\u0105tek o 1<\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Oto jak zosta\u0142y przetworzone obliczenia:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><code>3 pomno\u017cone przez 0 plus 1 <\/code> kt\u00f3rego wynikiem jest <strong>1<\/strong><\/li><li><code>3 pomno\u017cone przez 1 plus 1<\/code> kt\u00f3rego wynikiem jest <strong>4<\/strong><\/li><li><code>3 pomno\u017cone przez 2 plus 1<\/code> kt\u00f3rego wynikiem jest <strong>7<\/strong><\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Iterator <code>n<\/code> jest bardzo wszechstronny. Trudno jest znale\u017a\u0107 w\u0142a\u015bciwe obliczenia, wi\u0119c po prostu je przetestuj, aby znale\u017a\u0107 w\u0142a\u015bciwy wyb\u00f3r.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\">Inne pseudoklasy<\/h5>\n\n\n\n<p class=\"wp-block-paragraph\">Dost\u0119pne s\u0105 <a rel=\"noreferrer noopener\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Pseudo-classes\" data-type=\"URL\" data-id=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Pseudo-classes\" target=\"_blank\">dziesi\u0105tki <strong>pseudo-klas<\/strong><\/a>, niekt\u00f3re z nich s\u0105 przeznaczone dla bardzo specyficznych stan\u00f3w. Najcz\u0119\u015bciej u\u017cywane to te, kt\u00f3re om\u00f3wili\u015bmy<\/p>\n\n\n\n<h6 class=\"wp-block-heading\">\ud83d\udc47\ud83d\udc47\ud83d\udc47 Je\u017celi podoba\u0142 Ci si\u0119 ten artyku\u0142 zostaw po sobie \u015blad w komentarzach \ud83d\udc47\ud83d\udc47\ud83d\udc47<\/h6>\n","protected":false},"excerpt":{"rendered":"<p>Ulepszamy wiadomo\u015bci z selektor\u00f3w CSS W normalnym przebiegu przep\u0142ywu dokumentu style CSS s\u0105 dodawane na podstawie ich pozycji w drzewie DOM. Jednak czasami model ten nie jest wystarczaj\u0105cy, aby sprosta\u0107 naszym potrzeb\u0105 . Tutaj z pomoc\u0105 przychodz\u0105 nam pseudo-klasy. S\u0105 powi\u0105zane z elementami w spos\u00f3b odmienny, ni\u017c przynale\u017cno\u015b\u0107 po ich nazwie, atrybutach czy zawarto\u015bci. W [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":517,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[19,30],"class_list":["post-439","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html-css","tag-html","tag-selektory"],"_links":{"self":[{"href":"https:\/\/dziewczynanafroncie.pl\/api\/wp\/v2\/posts\/439","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dziewczynanafroncie.pl\/api\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dziewczynanafroncie.pl\/api\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dziewczynanafroncie.pl\/api\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dziewczynanafroncie.pl\/api\/wp\/v2\/comments?post=439"}],"version-history":[{"count":2,"href":"https:\/\/dziewczynanafroncie.pl\/api\/wp\/v2\/posts\/439\/revisions"}],"predecessor-version":[{"id":569,"href":"https:\/\/dziewczynanafroncie.pl\/api\/wp\/v2\/posts\/439\/revisions\/569"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dziewczynanafroncie.pl\/api\/wp\/v2\/media\/517"}],"wp:attachment":[{"href":"https:\/\/dziewczynanafroncie.pl\/api\/wp\/v2\/media?parent=439"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dziewczynanafroncie.pl\/api\/wp\/v2\/categories?post=439"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dziewczynanafroncie.pl\/api\/wp\/v2\/tags?post=439"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}