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.
* Selector
The * symbol select all elements.
Will give us this:
<p>this is a p</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.
Will give us this:
- <ul>
- <li class="foo">
foo li<p>child of a li foo, but not preceded by</p>
</li>
<p>not preceded by an li</p>
<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>
<p>isn't preceded by an li, but rather is a child of a div</p>
- <ul>
- <li>doesn't have a class foo</li>
<p>won't get the rule</p>
> Selector
The > symbol targets elements which are a direct child of an element.
Will give us this:
- direct child of the div
- still a direct child
- not a direct child
+ Selector
The + symbol specifies that the element after the plus sign must come immediately after the element before the plus sign.
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.
a[href^=”https”] Selector
This selects every <a> whose href attribute begins with “https”
https://dev-diaries.com http://dev-diaries.com
a[href$=”.pdf”] Selector
This selects every <a> element whose href attribute ends with .pdf
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”
Read more here