Learn CSS fundamentals really fast, online and free.
FULL COURSE: http://inarocket.com
Learn front end development fast, step-by-step and with ready-to-use code.
IN THIS MODULE YOU'LL LEARN:
- How to use attribute presence and value selectors.
- How to apply substring matching attribute selectors.
READY-TO-USE CODE:
http://inarocket.com/courses/css/css-fundamentals/selectors-attribute.php
BEST BOOKS TO LEARN CSS:
- CSS: The Definitive Guide: Visual Presentation for the Web by O'Reilly Media. https://amzn.to/2VOWHQT
- HTML and CSS: Design and Build Websites by John Wiley & Sons. https://amzn.to/2Ir5y3i
- CSS: The Missing Manual by O'Reilly Media. https://amzn.to/2ImdyTf
- CSS Visual Dictionary by Independently published. https://amzn.to/2xgwHUh
Call Girls in Uttam Nagar Delhi 💯Call Us 🔝8264348440🔝
8- Learn CSS Fundamentals / Attribute selectors
1. IN A ROCKET
Learn front-end development at rocket speed
CSS CSS FUNDAMENTALS
SelectorsAttribute
2. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
ATTRIBUTE
PRESENCE
AND VALUE
SELECTORS
SUBSTRING
MATCHING
ATTRIBUTE
SELECTORS
3. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
Attribute presence
and value selectors
[attribute]
[attribute=value]
[attribute~=value]
[attribute|=value]
4. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
ATTRIBUTE SELECTOR
With this code all elements with the target attribute are shown in green.
Selects all elements with a specific attribute.
[target] {color: green}
Syntax [attribute] {style properties}
5. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
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
6. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
Attribute presence
and value selectors
[attribute]
[attribute=value]
[attribute~=value]
[attribute|=value]
7. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
ATTRIBUTE SELECTOR
With this code all elements with the attribute target and the value _blank are shown in green.
Selects all elements with a specific attribute and value.
[target=_blank] {color: green}
Syntax [attribute=value] {style properties}
8. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
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
9. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
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
10. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
Attribute presence
and value selectors
[attribute]
[attribute=value]
[attribute~=value]
[attribute|=value]
11. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
ATTRIBUTE SELECTOR
With this code all elements with the attribute target and the value deal are shown in green.
Selects all elements with a specific 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}
12. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
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>
<p>Product info.</p>
</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
13. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
Attribute presence
and value selectors
[attribute]
[attribute=value]
[attribute~=value]
[attribute|=value]
14. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
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 specific attribute if their value is exactly a particular text or begins with it.
[hreflang|=en] {color: green}
Syntax [attribute|=value] {style properties}
15. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
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
16. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
ATTRIBUTE
PRESENCE
AND VALUE
SELECTORS
SUBSTRING
MATCHING
ATTRIBUTE
SELECTORS
17. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
Substring matching
attribute selectors
[attribute^=value]
[attribute*=value]
[attribute$=value]
18. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
value
^Begins with
*Contains
$
Ends with
19. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
Substring matching
attribute selectors
[attribute^=value]
[attribute*=value]
[attribute$=value]
20. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
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 specific attribute if their value begins with a particular text.
[data-item^=food] {color: green}
Syntax [attribute^=value] {style properties}
21. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
HTML CSS
Browser
ATTRIBUTE SELECTOR
<body>
<article data-item="food choco black">
<h2>Best chocolate ever!</h2>
<p>Product info.</p>
</article>
<article data-item="choco food white">
<h2>Just white chocolate</h2>
<p>Product info.</p>
</article>
</body>
[data-item^=food] { color: green; }
Web page title
index.html
Best chocolate ever!
Product info.
Just white chocolate
Product info.
READY TO USE CODE
22. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
Substring matching
attribute selectors
[attribute^=value]
[attribute*=value]
[attribute$=value]
23. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
ATTRIBUTE SELECTOR
With this code all elements with the data-item attribute and
its value containing food are shown in green.
Selects all elements with a specific attribute if their value contains a particular text.
[data-item*=food] {color: green}
Syntax [attribute*=value] {style properties}
24. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
HTML CSS
Browser
ATTRIBUTE SELECTOR
<body>
<article data-item="choco food black">
<h2>Best chocolate ever!</h2>
<p>Product info.</p>
</article>
<article data-item="choco white food">
<h2>Just white chocolate</h2>
<p>Product info.</p>
</article>
</body>
[data-item*=food] { color: green; }
Web page title
index.html
Best chocolate ever!
Product info.
Just white chocolate
Product info.
READY TO USE CODE
25. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
Substring matching
attribute selectors
[attribute^=value]
[attribute*=value]
[attribute$=value]
26. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
ATTRIBUTE SELECTOR
With this code all elements with the data-item attribute and
its value ending with food are shown in green.
Selects all elements with a specific attribute if their value ends with a particular text.
[data-item$=food] {color: green}
Syntax [attribute$=value] {style properties}
27. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
HTML CSS
Browser
ATTRIBUTE SELECTOR
<body>
<article data-item="choco food black">
<h2>Best chocolate ever!</h2>
<p>Product info.</p>
</article>
<article data-item="choco white food">
<h2>Just white chocolate</h2>
<p>Product info.</p>
</article>
</body>
[data-item$=food] { color: green; }
Web page title
index.html
Best chocolate ever!
Product info.
Just white chocolate
Product info.
READY TO USE CODE
28. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
ATTRIBUTE
PRESENCE
AND VALUE
SELECTORS
SUBSTRING
MATCHING
ATTRIBUTE
SELECTORS
29. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
REFERENCE: W3C
SOURCE: Selectors Level 3 by W3C.
30. Learn front-end development at rocket speed
inarocket.com
by miguelsanchez.com
YOU CAN CONTINUE THIS COURSE FOR FREE ON
+ READY TO USE CODE
+ QUIZZES
+ FREE UPDATES
31. 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.
Learn front-end development at rocket speed
inarocket.com
32. IN A ROCKET
Learn front-end development at rocket speed
CSS CSS FUNDAMENTALS
SelectorsAttribute