I dybden med CSS – Attribute selectors

CSS (Cascading Style Sheets) er i dag, af mange, anset for at være meget basic indenfor frontend webudvikling, og er sproget du bruger til at lægge farver, effekter og så videre på din hjemmeside, altså et designsprog! Men hvor meget ved du om CSS?

CSS i sig selv er ret nemt at forstå, og måske endnu nemmere at skrive, og de fleste ville måske betegne sig som ret gode til det! I de fleste tilfælde er det måske også rigtigt nok, men hvad mange ikke ved er at, CSS går lidt dybere end man lige skulle tro.
Vi skal derfor i dag snakke om Attribute selectors. Vi ved alle sammen hvordan vi kan style et element ved at give det et ID eller en class, for derefter at referere til det i vores CSS dokument, men hvad med, eksempeltvis, forms og dets input felter? Hvis vi styler en basic <input> element således:

input{
background-color: #000000;
}

Så vil vi få en sort baggrundsfarve på vores input felter, altså f.eks text, password og submit felter. For at style dem individuelt kunne man give dem classes eller IDs, men der er faktisk en smart metode til at style, eksempeltvis, password felter på. Her vil vi gøre brug af attribute selectors så vi, i stedet for at gå efter et id eller en class, så kan vi gå efter typen på input feltet.

input[type="password"] {
background-color: red;
}

input[type="text"] {
background-color: blue;
}

Alt vi så behøver at gøre er at placere vores input felter i vores HTML, uden ID eller class, og så vil alle password felter have en rød baggrund, og alle alm. text felter vil have en grøn baggrund.

<form> 
<input name="brugernavn" type="text" /> 
<input name="kodeord" type="password" /> 
</form>

Se eksempel

Vi kan også lave vores egne attributes. Her er et eksempel, hvor vi laver vores helt egen!

<h1>Vores modificerede overskrift</h1>
<h1>En normal overskrift</h1>

Her har vi angivet ‘foo’ til at være ‘bar’. Og vi kan derefter ramme vores h1 på den attribute på følgende måde:

h1{
color: blue;
}

h1[foo="bar"] {
color: red;
}

Og HTML delen:

<h1>Vores modificerede overskrift</h1>
<h1>En normal overskrift</h1>

Se eksempel

Det er meget godt, men kan vi rent faktisk bruge det til noget praktisk? Well alt er jo relativt, men jeg er sikker på at man kan få nogle ret gode effekter ud af det. Er du ikke overbevist? Jamen hvad hvis jeg fortæller dig at man rent faktisk kan style, eksempeltvis, et link, hvis linket vi linker til ender på f.eks. .pdf ? Det kan faktisk lade sig gøre!
Til dette skal vi bruge en lille tricky kombination af to tegn, nemlig “$=“. Dette betyder ‘ender med‘. Så lad os prøve at lave et eksempel hvor vi prøver at finde indholdet af href i et link, og ender dette link med .pdf, så vil vi gerne have lov til at style dette link!

a[href$=".pdf"] {
color: red;
}

Og så vores link, som henviser til en, ikke-eksisterende, pdf fil.

<a href="http://domain.dk/pdf_fil.pdf">Link til PDF fil</a>

Se eksempel

For at gå lidt dybere, så kan vi med :after gøre linket lidt mere interessant. Hvis linket er et PDF link, så vil vi gerne, udover at farve linket rødt, gerne automatisk informere om at det er en PDF fil, ved at skrive “(pdf fil)” efter linket.

a[href$=".pdf"] {
color: red;
}

a[href$=".pdf"]:after {
content: ' (pdf fil)';
color:grey;
}

Se eksempel

Dette var en hurtig gennemgang af hvad man også kan bruge CSS til, at der er mere bag sproget, end bare at skifte baggrunds, og tekstfarver på sin side.

Jeg håber at jeg har kunnet lære jer lidt, og som altid skal i være velkomne til at kommentere og dele linket med jeres venner hvis i fandt artiklen nyttig, på forhånd tak!