Live
x
<html> <head> <title>Selektory atrybutów</title> </head> <style> /* Podanie tylko nazwy atrybutu wybierze wszystkie tagi, które go posiadają: */ /* Wybieramy wszystkie tagi <h2>, które posiadają atrybut "id". Nie ma znaczenia jego wartość. */ h2[id] { color: red; } /* Wybieramy wszystkie tagi <section>, które posiadają atrybut "class". */ section[class] { background: pink; } /* Możemy również podać dokładną wartość atrybutu: */ h2[id="value"], h2[id="placeholder"] { border: 2px solid black; } section[class="green_border"] { border: 4px solid yellowgreen; } /* Możemy użyć dowolnie wybranego atrybutu: */ button[disabled] { padding: 10px; border-radius: 20px; } /* Dowolony <meter> posiadający atrybut "value" otrzyma fioletowe tło */ meter[value] { background: violet; } /* <meter> posiadający atrybut "value" równy "1" otrzyma czerwone tło */ meter[value="1"] { background: red; } /* Atrybut "hidden" ukrywa element na stronie (wykorzystując do tego CSS), ale możemy to zmienić pisząc własny CSS. Wybieramy tylko tag z klasą "show" */ span[hidden].show { display: block; font-size: 2em } input[placeholder="Podaj imię..."] { padding: 10px; border-radius: 10px; } </style> <body> <h1>Jest bardzo kolorowo, ale czasami trzema będzie odnaleźć się i w takiej mieszance 😉</h1> <section class="red_border"> <h2 id="disabled">Atrybut "disabled"</h2> <button id="bigButton">Aktywny</button> <button id="smallButton" disabled>Zablokowany</button> </section> <section> <h2 id="value">Atrybut "value"</h2> <meter></meter> <meter value="0.3"></meter> <meter value="1"></meter> </section> <section class="green_border"> <h2 id="hidden">Atrybut "hidden"</h2> <span>Widoczny tekst</span> <span hidden>Ukryty tekst 1</span> <span class="show" hidden>Ukryty tekst 2</span> </section> <h2 id="placeholder">Atrybut "placeholder"</h2> <input placeholder="Podaj imię..." /> <input /> </body></html>
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.