8- Learn CSS Fundamentals / Attribute selectors

IN A ROCKET
Learn front-end development at rocket speed
CSS CSS FUNDAMENTALS
SelectorsAttribute

CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
ATTRIBUTE
PRESENCE  
AND VALUE
SELECTORS
SUBSTRING
MATCHING
ATTRIBUTE
SELECTORS

Attribute presence  
and value selectors
[attribute]
[attribute=value]

[attribute~=value]

[attribute|=value]

ATTRIBUTE SELECTOR
With this code all elements with the target attribute are shown in green.
Selects all elements with a speciﬁc attribute.
[target] {color: green}
Syntax [attribute] {style properties}

HTML CSS
Browser
ATTRIBUTE SELECTOR
<body>
<a href="#" target="_blank">First link.</a>
<a href="#">Second link.</a>
</body>
[target] { color: green; }
Web page title
index.html
First link.
Second link.
READY TO USE CODE

and value selectors
[attribute]

[attribute=value]
[attribute~=value]

[attribute|=value]

ATTRIBUTE SELECTOR
With this code all elements with the attribute target and the value _blank are shown in green.
Selects all elements with a speciﬁc attribute and value.
[target=_blank] {color: green}
Syntax [attribute=value] {style properties}

HTML CSS
Browser
ATTRIBUTE SELECTOR
<body>
<a href="#" target="_blank">First link.</a><br>
<a href="#" target="_top">Second link.</a><br>
<a href="http://wikipedia.org">Wikipedia.</a><br>
<img src="world.png" alt="World">
</body>
[target=_blank] { color: red; }
[href=http://wikipedia.org] { color: green; }
[src=world.png] { background: green; }
Web page title
index.html
First link.
Second link.
Wikipedia.
READY TO USE CODE

HTML CSS
Browser
ATTRIBUTE SELECTOR
<body>
<form>
Name: <input type="text">
<input type="submit" value="Send">
</form>
</body>
[type=submit] { background: red; }
Web page title
index.html
Name:
Send
READY TO USE CODE

and value selectors
[attribute]

[attribute=value]

[attribute~=value]
[attribute|=value]

ATTRIBUTE SELECTOR
With this code all elements with the attribute target and the value deal are shown in green.
Selects all elements with a speciﬁc attribute, but only if the value is one of a space-separated list of
words.
[data-item~=deal] {color: green}
Syntax [attribute~=value] {style properties}

HTML CSS
Browser
ATTRIBUTE SELECTOR
<body>
<article data-item="food deal choco">
<h2>Best chocolate ever!</h2>
<p>Product info.</p>
</article>
<article data-item="food choco">
<h2>Just white chocolate</h2>
</article>
</body>
[data-item~=deal] { color: green; }
Web page title
index.html
Best chocolate ever!
Product info.
Just white chocolate
Product info.
READY TO USE CODE

and value selectors
[attribute]

[attribute=value]

[attribute~=value]

[attribute|=value]

ATTRIBUTE SELECTOR
With this code all elements with the hreflang attribute and  
its value beginning with en are shown in green.
Selects all elements with a speciﬁc attribute if their value is exactly a particular text or begins with it.
[hreﬂang|=en] {color: green}
Syntax [attribute|=value] {style properties}

HTML CSS
Browser
ATTRIBUTE SELECTOR
<body>
<a href="#" hreflang="en">Wikipedia English</a><br>
<a href="#" hreflang="en-us">Wikipedia US</a><br>
<a href="#" hreflang="en-gb">Wikipedia UK</a><br>
<a href="#" hreflang="fr">Wikipedia France</a>
</body>
[hreflang|=en] { color: green; }
Web page title
index.html
Wikipedia English
Wikipedia US 
Wikipedia UK 
Wikipedia France
READY TO USE CODE

Substring matching  
attribute selectors
[attribute^=value]

[attribute*=value]

[attribute$=value]

value
^Begins with
*Contains
$
Ends with

attribute selectors
[attribute^=value]
[attribute*=value]

[attribute$=value]

ATTRIBUTE SELECTOR
With this code all elements with the data-item attribute and  
its value beginning with food are shown in green.
Selects all elements with a speciﬁc attribute if their value begins with a particular text.
[data-item^=food] {color: green}
Syntax [attribute^=value] {style properties}

HTML CSS
Browser
ATTRIBUTE SELECTOR
<body>
<article data-item="food choco black">
</article>
<article data-item="choco food white">
</article>
</body>
[data-item^=food] { color: green; }
Web page title
index.html
Product info.
Product info.
READY TO USE CODE

attribute selectors
[attribute^=value]

[attribute*=value]
[attribute$=value]

ATTRIBUTE SELECTOR
its value containing food are shown in green.
Selects all elements with a speciﬁc attribute if their value contains a particular text.
[data-item*=food] {color: green}
Syntax [attribute*=value] {style properties}

HTML CSS
Browser
ATTRIBUTE SELECTOR
<body>
<article data-item="choco food black">
</article>
<article data-item="choco white food">
</article>
</body>
[data-item*=food] { color: green; }
Web page title
index.html
Product info.
Product info.
READY TO USE CODE

ATTRIBUTE SELECTOR
its value ending with food are shown in green.
Selects all elements with a speciﬁc attribute if their value ends with a particular text.
[data-item$=food] {color: green}
Syntax [attribute$=value] {style properties}

HTML CSS
Browser
ATTRIBUTE SELECTOR
<body>
<article data-item="choco food black">
</article>
<article data-item="choco white food">
</article>
</body>
[data-item$=food] { color: green; }
Web page title
index.html
Product info.
Product info.
READY TO USE CODE

REFERENCE: W3C
SOURCE: Selectors Level 3 by W3C.

inarocket.com
by miguelsanchez.com
YOU CAN CONTINUE THIS COURSE FOR FREE ON
+ READY TO USE CODE
+ QUIZZES
+ FREE UPDATES

We respect your time 
No more blah blah videos. Just straight to
the point slides with relevant information.
Ready to use code 
Real code you can just copy and paste into
your real projects.
Step by step guides 
Clear and concise steps to build real use
solutions. No missed points.
inarocket.com

8- Learn CSS Fundamentals / Attribute selectors

Recommended

More Related Content

Similar to 8- Learn CSS Fundamentals / Attribute selectors (20)

More from In a Rocket (10)

Recently uploaded (15)

8- Learn CSS Fundamentals / Attribute selectors