{"id":161,"date":"2023-05-29T15:48:50","date_gmt":"2023-05-29T13:48:50","guid":{"rendered":"https:\/\/user0.gesem.es\/blog\/?page_id=161"},"modified":"2023-05-29T15:49:20","modified_gmt":"2023-05-29T13:49:20","slug":"pseudo-classes","status":"publish","type":"page","link":"https:\/\/user0.gesem.es\/blog\/pseudo-classes\/","title":{"rendered":"Pseudo-classes"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Les pseudo-classes de CSS s\u00f3n unes part\u00edcules que podem afegir al selector per dir al navegador que volem modificar algun aspecte d&#8217;un element. Per exemple, :hover pot ser afegit a un enlla\u00e7 (a) per definir com volem que sigui aquest enlla\u00e7 al passar el cursor per sobre.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A classe hem fet servir la pseudo-classe :hover per a definir com es comporten els elements amb la classe \u00abpildora\u00bb quan passem el cursor per sobre<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.pildora{<br>background-color:white;<br>color:black;<br>font-size:20px;<br>line-height:1;<br>padding:1em;<br>border-radius:1em;<br>}<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>.pildora:hover{<br>background-color:black;<br>color: white;<br>}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Hi ha altres pseudo-classes que pots consultar aqu\u00ed: <\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/developer.mozilla.org\/es\/docs\/Web\/CSS\/Pseudo-classes\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/developer.mozilla.org\/es\/docs\/Web\/CSS\/Pseudo-classes<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A classe hem parlat de les seg\u00fcents pseudo-classes:<br>:last-child<br>:first-child<br>:nth-child(X) (on X pot ser un n\u00famero)<br>:not(X) (on X pot ser un selector, per exemple a:not(.pildora) permetr\u00e0 estilar qualsevol enlla\u00e7 que no tingui la classe \u00abpildora\u00bb<\/p>\n\n\n\n<div class=\"wp-block-group exercici\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<p class=\"wp-block-paragraph\">Exercici:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Busca informaci\u00f3 sobre les seg\u00fcents pseudo-classes i aplica-les als teus enlla\u00e7os tipus .pildora:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>:active<\/li>\n\n\n\n<li>:visited<\/li>\n\n\n\n<li>:link<\/li>\n<\/ul>\n<\/div><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Les pseudo-classes de CSS s\u00f3n unes part\u00edcules que podem afegir al selector per dir al navegador que volem modificar algun aspecte d&#8217;un element. Per exemple, :hover pot ser afegit a un enlla\u00e7 (a) per definir com volem que sigui aquest enlla\u00e7 al passar el cursor per sobre. A classe hem fet servir la pseudo-classe :hover&hellip; <a class=\"more-link\" href=\"https:\/\/user0.gesem.es\/blog\/pseudo-classes\/\">Continueu llegint <span class=\"screen-reader-text\">Pseudo-classes<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-161","page","type-page","status-publish","hentry","entry"],"_links":{"self":[{"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/pages\/161","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/comments?post=161"}],"version-history":[{"count":2,"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/pages\/161\/revisions"}],"predecessor-version":[{"id":163,"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/pages\/161\/revisions\/163"}],"wp:attachment":[{"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/media?parent=161"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}