Селектор [атрибут$="значення"] — CSS вибір за кінцем

HTML

<div class="mytest">class="mytest" — жовтий: закінчується на "test"</div>
<div class="tester">class="tester" — без змін</div>

CSS

div[class$="test"] {
    background: #ffff00;
}

HTML

<p class="unit-test">p із class="unit-test" — жовтий</p>
<div class="testing">class="testing" — без змін</div>

CSS

[class$="test"] {
    background: #ffff00;
}

HTML

<h4 class="cap">1. Точно як написано: <code>[href$=".pdf"]</code></h4>
<ul class="box strict">
    <li><a href="doc.pdf">doc.pdf</a> — збіг</li>
    <li><a href="DOC.PDF">DOC.PDF</a> — регістр інший, збігу немає</li>
    <li><a href="a.pdf?v=2">a.pdf?v=2</a> — хвіст адреси, збігу немає</li>
    <li><a href="x.pdfx">x.pdfx</a> — закінчується не на pdf</li>
    <li><a href="pdf">pdf</a> — а тут закінчується, хоч це й не файл</li>
</ul>

<h4 class="cap">2. Те саме з прапорцем <code>i</code> та через <code>*=</code></h4>
<ul class="box loose">
    <li><a href="doc.pdf">doc.pdf</a></li>
    <li><a href="DOC.PDF">DOC.PDF</a></li>
    <li><a href="a.pdf?v=2">a.pdf?v=2</a></li>
    <li><a href="x.pdfx">x.pdfx</a></li>
</ul>
<p class="note">Суцільна рамка — <code>[href$=".pdf" i]</code>, пунктирна —
    <code>[href*="pdf"]</code>. Другий бере все, де рядок трапився будь-де.</p>

<h4 class="cap">3. Уся родина на одному елементі</h4>
<div class="box family">
    <p data-x="alpha beta" class="btn btn-primary" lang="fr-CA">
        Цей абзац має <code>data-x="alpha beta"</code>,
        <code>class="btn btn-primary"</code> і <code>lang="fr-CA"</code>.</p>
    <ul class="legend">
        <li class="m1">[data-x] — просто «атрибут є»</li>
        <li class="m2">[data-x="alpha beta"] — точний збіг УСЬОГО значення</li>
        <li class="m3">[data-x~="beta"] — окреме слово в списку через пробіл</li>
        <li class="m4">[lang|="fr"] — значення або його початок до дефіса</li>
        <li class="m5">[class|="btn"] — НЕ збігається: значення не «btn» і не «btn-…»</li>
        <li class="m6">[class$="primary"] — кінець усього значення атрибута</li>
    </ul>
</div>

CSS

.box {
    max-width: 560px;
    margin-bottom: 6px;
    padding: 10px 14px 14px 30px;
    border: 1px solid #b9c6d8;
    border-radius: 6px;
    background: #f6f9ff;
}

.box li {
    margin: 6px 0;
}

.strict a[href$=".pdf"] {
    outline: 3px solid #3a9a4f;
    outline-offset: 2px;
}

.loose a[href$=".pdf" i] {
    outline: 3px solid #3a9a4f;
    outline-offset: 2px;
}

.loose a[href*="pdf"] {
    background: #edf9ef;
    border-bottom: 2px dashed #2f6fd0;
}

/* родина: кожен рядок легенди підсвічуємо лише тоді, коли селектор справді збігся */
.family p[data-x] ~ .legend .m1,
.family p[data-x="alpha beta"] ~ .legend .m2,
.family p[data-x~="beta"] ~ .legend .m3,
.family p[lang|="fr"] ~ .legend .m4,
.family p[class|="btn"] ~ .legend .m5,
.family p[class$="primary"] ~ .legend .m6 {
    color: #29713a;
    font-weight: 700;
}

.legend {
    margin: 12px 0 0;
    padding-left: 18px;
    color: #b23a3a;
    font-size: .9em;
}

.cap {
    margin: 24px 0 8px;
    font-size: 1rem;
    color: #5a6472;
}

.note {
    max-width: 560px;
    color: #5a6472;
    font-size: .9em;
}

code {
    background: #eef4ff;
    border-radius: 3px;
    padding: 0 4px;
}