12 Types of Advanced CSS Selectors!! | (Part-2🎉)
Tags: css, html, webdev, todayilearned
Published: 2021-12-22 07:58:28

Hey Gang, Feel well-timed to see you again in part-2😍. Hope you grasped plenty of brand new concepts in part-1. This part-2 completely concerning <b>7 Type Of Attribute Selector!!</b>.

> <em>If you not noticed the part-1, don't worry just relax explore the part-2 then move to [Part-1](https://dev.to/preethi_dev/12-types-of-advanced-css-selectors-part-1-5b3d) and I'm not rush you which is completely based on your pace.</em>

1. <b>[attr]</b>
2. <b>[attr=value]</b>
3. <b>[attr~=value]</b>
4. <b>[attr|=value]</b>
5. <b>[attr^=value]</b>
6. <b>[attr$=value]</b>
7. <b>[attr*=value]</b>

While seeing above, Feel a little weird right. Uh, it's not a big deal. I'm here to make your CSS life get easier. So, Hope and continue reading the downstairs😉. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l3n9p9hw9ucc6gthfavb.gif)

> <em>Every attribute selector should be in square-bracket[ ]</em>

<h2>Type 1 - <code>[attr]</code></h2>
Represents elements with an attribute name of <code>attr</code>.
```html
<a href="http://example.com" target="_blank">I'm External Link😎</a>
<a href="#internal">I'm internal link🙄</a>
```
```css
[target]{
    color: orange;
}
/* attribute selector can also be specify with their element name */
a[target]{
    color: orange;
}
```
The above style hinted that, If the <code>targe</code> attribute exist in <code>a</code> tag then apply their styles. Hope make sense. If you feel need some practice then don't hesitate, feel free to play around in codepen below.

> <em>Real time situation - Some situations like need to imply the user that some links are linked to external resources. At that time, Use <code>a[target]</code></em> 

{% codepen https://codepen.io/preethi-dev/pen/YzrxEMG %}

<h2>Type 2 - <code>[attr=value]</code></h2>
Represents elements with an attribute name of attr whose value is exactly equal to given value.

> In simple words, <b>Attribute Exactly Equals Certain Value.</b>

```html
    <a href="https://example.org" target="_blank">Yes, I'm😎</a>
    <a href="#internal">Oops, I'm not😣</a>
```
```css
/* <a> elements with an href matching "https://example.org" */
a[href="https://example.org"] {
  color: green;
}
```
Above example illustrate that, If <code>a</code> tag contain <code>href</code> attribute which exactly equal to the<code>"https://example.org"</code> value and then only which apply styles. Hope you get a idea and i wish you to do practice on code pen.

{% codepen https://codepen.io/preethi-dev/pen/PoJKExd %}

The above two type of selectors feels trouble free. Upcoming guys are not give much more trouble. But, They are little bit tricky and they expect more attention to understand their behaviour.

<h2>Type 3 - <code>[attr~=value]</code></h2>
Represents elements with an attribute name of attr whose value is a whitespace-separated list of words. 

> <em>Simply like Attribute Value is in Space-Separated List </em>

```html
<img src="//placehold.it/150/150" alt="abstract art">
  <img src="//placehold.it/150/150" alt="something to eat">
  <img src="//placehold.it/150/150" alt="athlete starting a new sport">
```
```css
img[alt~="art"] {
  border: 3px solid lightgreen;
}
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n4fe59iobkuqpkpy5fg1.png)
 
In the above example is not much funny. so, please forgive me though I promise you I will clear the concept. we select images with the word "art" in their <code>alt</code> attribute, <b>which either as the only value or as a whole word in a space separated list</b>. Hey observe that, the image with the <code>alt</code> text "athlete st<b>art</b>ing a new sport" is not outlined. But, The image with <code>alt</code> text "abstract <b>art</b>" is outlined. Hope make sense.

{% codepen https://codepen.io/preethi-dev/pen/PoJKRxm %}

<h2>Type 4 - <code>[attr|=value]</code></h2>
Represents elements with an attribute name of attr whose value can be exactly value or can begin with value immediately followed by a hyphen. If you can't get my point, that's completely fine and continue reading on downstairs. you will get a crystal clear idea through example.

> <em>Rephrase the above definition in simple words like <b>Attribute value starts with this in a dash-separated list</b></em>.

For instance,

```html
 <ul>
    <li data-years="1800-1900">The 19th Century</li>
    <li data-years="1900-2000">The 20th Century</li>
    <li data-years="2000-2100">The 21st Century</li>
 </ul>
```
```css
/* attr|=value */
li[data-years|="1900"] {
  color: red;
}
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n1m1ix0b04pg5chvjbhr.png)
Above example illustrate that selecting the list item with a <code>data-years</code> attribute that has <b>"1900"</b> as the only value or the first in a dash separated list. Notice that only the 2nd list item is selected. The first list item has "1900" in its data attribute value, but it's after the dash which means <b>the selector matches a value that is either the only value or is the first in a dash-separated list of values</b>.

{% codepen https://codepen.io/preethi-dev/pen/NWavomN %}

Hey still with me, admire your patience in learning advanced and Congratulations🎉🎉 since you break down the tricky concepts and remaining guys are very easy to grasp.

<h2>Type 5 - <code>[attr^=value]</code></h2>
Represents elements with an attribute name of attr whose value is prefixed (preceded) by value which means attribute value starts with the selected term. To use this selector, add a caret (<code>^</code>) before the equals sign. Be consious , <b>case-sensitivity</b> matters. 

> <em>Attribute Begins with Certain Value</em>

For instance,

```html
  <img src="//placehold.it/150/184/abstract" alt="artistic pattern">
  <img src="//placehold.it/150/184/food" alt="a healthy meal">
  <img src="//placehold.it/150/184/sports" alt="Arthur Miller">
```
```css
img[alt^="art"] {
  /* alt attribute starts with the value "art" */
  border: 3px solid #e18728;
}
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qp23cz9jobu3vkwbbivi.png)

Above example implies that we select the images with <code>alt</code> text that starts with "art". Notice that the image with the <code>alt</code> text "<b>art</b>istic pattern" is selected, but the image with the <code>alt</code> text "<b>A</b>rthur Miller" is not because <b>attribute selectors are case-sensitive</b>.

{% codepen https://codepen.io/preethi-dev/pen/jOGLJKZ %}

<h2>Type 6 - <code>[attr$=value]</code></h2>
Represents elements with an attribute name of attr whose value is suffixed (followed) by value which means attribute value ends with the selected term. To use this selector, add a dollar sign ($) before the equals sign.

> <em>Similar to type-5. In type-5(<code>^</code>) which check the match in <b>start</b> but in type-6(<code>$</code>) which check the match in <b>end</b>

```html
  <h2>[attr$=value]</h2>
  <a href="example.pdf" target="_blank">I'm pdf file😉</a>
  <a href="#internal">hm, I'm a link😒</a>
```
```css
[href$="pdf"]{
  background: white;
  color: brown;
  text-decoration: none;
  padding: .5em;
  border-radius: 2em;
  display: inline-block;
}
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m72fsl6jtehehi1h6oud.png)

In the preceding instance, we select the link with the <code>href</code> that ends with "pdf" and then apply the styles.
I recommend you to practice and experiment in codepen. 

{% codepen https://codepen.io/preethi-dev/pen/zYEdXxg %}

<em> Proud of your accountability🥳🥳, you reached the final type of attribute selector </em>

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pchlr5748bfjgqd85dq9.gif)
 
<h2>Type 7 - <code>[attr*=value]</code></h2>
Represents elements with an attribute name of attr whose value contains at least one occurrence of value within the string 

> <em>It simply means value need not to be in start or end or space-seprated or dash seperated, which expect <b>Attribute Contains Certain Value anywhere</b></em>.

```html
  <h2>[attr*=value]</h2>
  <img src="//placehold.it/150/150" alt="abstract art">
  <img src="//placehold.it/150/150" alt="something to eat">
  <img src="//placehold.it/150/150" alt="athlete starting a new sport">
```
```css
/* [attr*=value] */
img[alt*="art"] {
  border: 3px solid lightgreen;
}
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/46m2rp19irkdkcwzts1b.png)

Here we select the images with the full word or word fragment "art" in the <code>alt</code> text and give them an outline. Notice that the images with the alt text "abstract <b>art</b>" and "athlete st<b>art</b>ing a new sport" both get outlined. Hope you grasp that idea.

{% codepen https://codepen.io/preethi-dev/pen/MWEvdwa %}

Such a long blog, you may feel tired😅. So, Take a small break and refresh your mind. I feel reward you because on your patience, Really you make a perfect road to reach your destination. I care to help you for save your time and so, I cover all the selectors in codepen(<em>like a cheet sheet and demo with all selectors</em>).

{% codepen https://codepen.io/preethi-dev/pen/ZEXJJOd %}

If you loved this blog, Then give an endearing heart💝and drop your thought about this blog😍 which really a lot to me. I love the discussion with you, If you feel not comfortable at styling concepts or have any doubts.

Thanks for Reading!!
<b>Preethi</b>
<em>- Make your CSS life easier</em>