CSS Symbol Selectors

CSS has some selector symbols that can allow you to target elements in a generalized way. Familiarity with these selector symbols can reduce bloat in your CSS and allow you to move quicker when making styles for your website.

css-cover-1

* Selector

The * symbol select all elements.

.all-example * {
    color: blue;
}

<div class="all-example">
    <span>this is a span</span>
    <p>this is a p</p>
    <div>this is a div</div>
</div>

Will give us this:

this is a span

this is a p

~ Selector

The ~ symbol selects all elements that are preceded by the former selector. This also means that the element doesn’t have to come directly after, it can be one after or three after, etc, but it won’t affect children of the former selector.

li.foo ~ p {
    border: orange;
}

<ul>
    <p>not preceded by an li</p>
    <li class="foo">
        foo li
        <p>child of a li foo, but not preceded by</p>
    </li>
    <p>preceded by an li</p>
    <p>preceded by an li but is 2 after</p>
    <span>Not a p tag</span>
    <p>A p tag and gets the rule because it has an li before it at some point</p>
    <div>
        <p>isn't preceded by an li, but rather is a child of a div</p>
    </div>
</ul>
<ul>
    <li>doesn't have a class foo</li>
    <p>won't get the rule</p>
</ul>

Will give us this:

not preceded by an li

<li class="foo">
foo li
child of a li foo, but not preceded by

preceded by an li

preceded by an li but is 2 after

Not a p tag

A p tag and gets the rule because it has an li before it at some point

<div>

isn't preceded by an li, but rather is a child of a div

</ul>

<li>doesn't have a class foo</li>

won't get the rule

</ul>

> Selector

The > symbol targets elements which are a direct child of an element.

div.greater > ul {
    color: red;
}

<div class="greater">
    <ul>direct child of the div</ul>
    <ul>still a direct child</ul>
</div>
<ul>not a direct child</ul>

Will give us this:

direct child of the div

still a direct child

not a direct child

css-cover-1

+ Selector

The + symbol specifies that the element after the plus sign must come immediately after the element before the plus sign.

div.add + span {
    border: 1px solid green;
}

<div class="add">div</div>
<p>comes right after so gets the rule</p>
<p>comes after but NOT right after so no rule</p>

div

comes right after so gets the rule

comes after but NOT right after so no rule

[title~=color] Selector

This selects all elements with a title attribute containing exactly the word color.

[title~=color] {
    border: 1px solid blue;
}

<div title="color">has a title of color</div>
<div title="some-color">does not exactly have a title of color</div>

has a title of color

does not exactly have a title of color

a[href^=”https”] Selector

This selects every <a> whose href attribute begins with “https”

a.secure[href^="https"] {
    border: 1px solid red;
}

<a class="secure" href="https://dev-diaries.com" target="_blank">begins with https</a>
<a class="secure" href="http://dev-diaries.com" target="_blank">DOES NOT begin with https</a>

https://dev-diaries.com http://dev-diaries.com

css-cover-3

a[href$=”.pdf”] Selector

This selects every <a> element whose href attribute ends with .pdf

a[href$=".pdf"] {
    border: 1px solid orange;
}

<a href="https://dev-diaries.pdf" target="_blank">https://dev-diaries.pdf</a>
<a href="http://dev-diariespdf" target="_blank">http://dev-diariespdf</a>

https://dev-diaries.pdf http://dev-diariespdf

a[href∗=”post”] Selector

This selects every <a> element whose href attribute contains the substring post. It needs to contain at least one occurence of “post”

a[href*="post"] {
    border: 1px solid green;
}

<a href="https://dev-diaries.com/post" target="_blank">https://dev-diaries.com/post</a>

https://dev-diaries.com/post