Styliser les liens avec :has() et les sélecteurs d'attribut
HTML
index.html <div class="links">
<a id="top" href="https://www.samuelgomez.fr">https personal Website</a>
<a href="http://www.example.fr">No https external website</a>
<a href="#top">My anchor link</a>
</div>
<div class="links">
<div class="link-box">
<p>Télécharger votre fichier</p>
<a href="text.txt">Download</a>
</div>
<div class="link-box">
<p>Télécharger votre fichier</p>
<a href="myfile.jpg">Download</a>
</div>
<div class="link-box">
<p>Télécharger votre fichier</p>
<a href="myfile.wave">Download</a>
</div>
<div class="link-box">
<p>Télécharger votre fichier</p>
<a href="myfile.pdf">Download</a>
</div>
<div class="link-box">
<p>Télécharger votre fichier</p>
<a href="myfile.docx">Download</a>
</div>
<div class="link-box">
<p>Télécharger votre fichier</p>
<a href="myfile.xslx">Download</a>
</div>
</div>
CSS
style.css @layer demo {
.links {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
margin-block-end: 2rem;
a:after {
content: var(--icon-link, "");
}
a[href^="#"] {
--icon-link: " 🔗";
&:after {
font-size: 0.8em;
}
}
a:is([href^="https://"],[href^="http://"])
{
--icon-link: " ↗";
}
.link-box {
--theme-color: #333;
--theme-icon: "📄";
--theme-file: "";
border: 1px solid var(--theme-color);
padding: 1rem 1rem 2rem 1rem;
border-radius: 15px;
text-align: center;
position: relative;
background: linear-gradient(
45deg,
color-mix(in srgb, var(--theme-color) 70%, white) 50%,
color-mix(in srgb, var(--theme-color) 45%, white)
);
transition: background 0.5s linear;
&::before {
border-radius: 5px;
position: absolute;
height: 20px;
background: color-mix(in srgb, var(--theme-color) 70%, white);
top: 0;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 0.8rem;
padding: 0.1rem 0.5rem;
line-height: 1;
display: flex;
place-items: center;
z-index: 2;
content: var(--theme-icon);
}
&:hover,
&:focus-within {
background: color-mix(in srgb, var(--theme-color) 5%, white);
transition: background 0.5s linear;
a {
color: color-mix(in srgb, var(--theme-color) 35%, black);
}
}
a {
color: color-mix(in srgb, var(--theme-color) 20%, white);
border-radius: 15px;
position: absolute;
display: grid;
height: calc(100% - 0.5rem);
padding-bottom: 0.5rem;
width: 100%;
top: 0;
left: 0;
justify-content: center;
align-content: end;
&:hover,
&:focus {
outline: 2px solid color-mix(in srgb, var(--theme-color) 45%, white);
outline-offset: 2px;
}
}
p {
color: color-mix(in srgb, var(--theme-color) 15%, black);
margin: 0;
font-size: 0.9rem;
&::after {
position: relative;
content: var(--theme-file);
}
}
&:has(a[href$=".wave"]) {
--theme-color: purple;
--theme-icon: "🔈";
--theme-file: " Audio";
}
&:has(a[href$=".jpg"]) {
--theme-color: sienna;
--theme-icon: "🏞";
--theme-file: " Image";
}
&:has(a[href$=".pdf"]) {
--theme-color: darkred;
--theme-icon: "PDF";
--theme-file: " PDF";
}
&:has(a[href$=".docx"]) {
--theme-color: blue;
--theme-icon: "DOCX";
--theme-file: " DOCX";
}
&:has(a[href$=".xslx"]) {
--theme-color: darkgreen;
--theme-icon: "XLSX";
--theme-file: " XLSX";
}
}
}
}
@layer demoStyles {
body {
height: 100svh;
gap: normal;
}
a {
color: white;
}
}