Styling with Data Attributes

Here goes your text ... Select any part of your text to access the formatting toolbar.

What is a Data Attribute?

Here goes your text ... Select any part of your text to access the formatting toolbar.
<!-- Should alway start with data prefix -->

<div class="profile-card" data-profile-name="Rocco">
     	<!-- Content -->
</div>

What is an attribute selector?

Here goes your text ... Select any part of your text to access the formatting toolbar.
[data-profile-name="Rocco"] {
	display: awesome;
}

Styling With Data Attributes

Here goes your text ... Select any part of your text to access the formatting toolbar.

Styling with Data Attributes

Here goes your text ... Select any part of your text to access the formatting toolbar.

Displaying content with data attributes

Here goes your text ... Select any part of your text to access the formatting toolbar.
I am a button

JS "Interactions" with data attributes

Here goes your text ... Select any part of your text to access the formatting toolbar.
Using classes: 
SuccessWarningDanger
Using a Data Attribute: 
SuccessWarningDanger

Attribute Selector Superpowers

Here goes your text ... Select any part of your text to access the formatting toolbar.

Target elments with a specific attribute

a[class] {
	border: 5px solid red;
}

a[title] {
	border: 5px solid red;
}
Link with a titleLink with no title

Attribute Selector Superpowers

Here goes your text ... Select any part of your text to access the formatting toolbar.

Target elments with a specific attribute

a[class="btn"] {
	border: 5px solid red;
}

a[href="/] {
	border: 5px solid red;
}

[data-profile-name="Rocco"] {
	border: 5px solid red;
}
Link to homepagePlain linkLink with .btn-att

Target elements with an attribute value that contains a specific string

a[class*="btn--"] {
	border: 5px solid red;
}
Link with .btn-attLink with .btn-att--darkLink with .btn-att--light

Target elements with an attribute value that contains a specific word

a[data-name~="Rocco"] {
	border: 5px solid red;
}
[data-name="Rocco"] - Link with .btn[data-name="Tartaglia"] - Link with .btn-att--dark[data-name="RoccoTartaglia"] - Link with .btn-att--light

Target elements with an attribute value that start  with a specific string

a[href^="http://"] {
	border: 5px solid red;
}
Link with https://Link with https://Link with http://

Remove case-sensitivy from an attribute selector

a[class$="dark"] {
	border: 5px solid red;
}
Link with .btn-attLink with .btn-att--darkLink with .btn-att--light

Target elements with an attribute value that ends  with a specific string

a[class$="dark"] {
	border: 5px solid red;
}

More examples

/* Image Source */
[src]

/* Image Alt */
[alt]

/* Dimension */
[width]
[height]

/* Languages */
[lang]

/* Inline Style */
[style]

/* Title */
[title]

/* Date and Time */
[datetime]

/* Disabled */
[disabled]