SPACEBAR to move forward through slides.
SHIFT & SPACEBAR to move backwards through slides.
LEFT ARROW & RIGHT ARROW to move through sections.
ESC to see overview and ESC again to exit.
F to enter presentation mode and ESC to exit.
Attribute selectors are used to select elements based on their attributes or their attribute and values.
The [att] attribute selector is written as "E[att]".
The "E" is for an optional element.
The "att" is for the relevant attribute.
/* syntax */
E[att] { }
/* example */
input[required] { }
The [att] attribute selector targets any element with the relevant attribute.
In the following example, any <input> element with a required attribute will be selected.
/* CSS selector */
input[required] { }
<!-- HTML markup -->
<input type="text" required>
<input type="text">
W3C Selectors Level 4
Status: Working Draft
Selectors Level 3
Status: Recommendation
CSS Level 2 (Revision 1)
Status: Recommendation
The [att] attribute selector is not supported by IE6 or IE7.
Open this HTML file in an editor:
exercises-start/exercise-205-10-01.html
Write a CSS rule to style any <input> with a boolean required attribute. Set with border: 1px solid red.
/* Add styles here */
input[required] {
border: 1px solid red;
}
Check your work against the finished HTML file:
exercises-finished/exercise-205-10-01.html
The [att=val] attribute selector is written as "E[att=value]".
The "E" is for an optional element.
The "att" is for the relevant attribute.
The "val" is for the relevant attribute value which can be placed inside single, double or no quotes.
/* syntax */
E[att=val] { }
E[att='val'] { }
E[att="val"] { }
/* example */
p[class="blue"] { }
The [att=val] attribute selector targets any element with the relevant attribute value.
In the following example, any <p> with a class of blue will be selected. Multiple values and hyphen-separated values will not be selected.
/* CSS selector */
p[class="blue"] { }
<!-- HTML markup -->
<p class="blue"></p>
<p class="blue red"></p>
<p class="red blue"></p>
<p class="blue-new"></p>
<p class="new-blue"></p>
W3C Selectors Level 4
Status: Working Draft
Selectors Level 3
Status: Recommendation
CSS Level 2 (Revision 1)
Status: Recommendation
The [att=val] attribute selector is not supported by IE6.
Open this HTML file in an editor:
exercises-start/exercise-205-10-02.html
Write a CSS rule to style any <p> element with a class value of one. Set to color: burlywood.
/* Add styles here */
p[class="one"] {
color: burlywood;
}
Check your work against the finished HTML file:
exercises-finished/exercise-205-10-02.html
The [att~=val] attribute selector is written as "E[att~=value]".
The "E" is for an optional element.
The "att" is for the relevant attribute.
The "val" is for the relevant attribute value which can be placed inside single, double or no quotes.
The "~" symbol after the "att" means the value must be "space-separated".
/* syntax */
E[att~=val] { }
E[att~='val'] { }
E[att~="val"] { }
/* example */
p[class~="blue"] { }
The [att~=val] attribute selector targets any space-separated instances of a value.
In the following example, any <p> element with a class value of blue, including space separated instances, will be selected.
/* CSS selector */
p[class~="blue"] { }
<!-- HTML markup -->
<p class="blue"></p>
<p class="blue red"></p>
<p class="red blue"></p>
<p class="blue-new"></p>
<p class="new-blue"></p>
W3C Selectors Level 4
Status: Working Draft
Selectors Level 3
Status: Recommendation
CSS Level 2 (Revision 1)
Status: Recommendation
The [att~=val] attribute selector is not supported by IE6.
Open this HTML file in an editor:
exercises-start/exercise-205-10-03.html
Write a CSS rule to style any <p> element with a class value of one. Set to color: palevioletred.
Also, you need to style any space-separated instances of the class value of one.
/* Add styles here */
p[class~="one"] {
color: palevioletred;
}
Check your work against the finished HTML file:
exercises-finished/exercise-205-10-03.html
The [att|=val] attribute selector is written as "E[att|=value]".
The "E" is for an optional element.
The "att" is for the relevant attribute.
The "val" is for the relevant attribute value which can be placed inside single, double or no quotes.
The "|" symbol after the "att" means the value must be "hyphen-separated".
/* syntax */
E[att|=val] { }
E[att|='val'] { }
E[att|="val"] { }
/* example */
p[class|="blue"] { }
The [att|=value] attribute selector targets any element with an attribute value that matches, including hyphen-separated values.
In the following example, any <p> element with a class value of blue or blue- will be selected.
/* CSS selector */
p[class|="blue"] { }
<!-- HTML markup -->
<p class="blue"></p>
<p class="blue red"></p>
<p class="red blue"></p>
<p class="blue-new"></p>
<p class="new-blue"></p>
W3C Selectors Level 4
Status: Working Draft
Selectors Level 3
Status: Recommendation
CSS Level 2 (Revision 1)
Status: Recommendation
The [att|=val] attribute selector is not supported by IE6.
Open this HTML file in an editor:
exercises-start/exercise-205-10-04.html
Write a CSS rule to style any <p> element with a class value of one. Set to color: mediumspringgreen.
Also, you need to style any hyphen-separated instances of the class value of one.
/* Add styles here */
p[class|="one"] {
color: mediumspringgreen;
}
Check your work against the finished HTML file:
exercises-finished/exercise-205-10-04.html
The [att^=val] attribute selector is written as "E[att^=value]".
The "E" is for an optional element.
The "att" is for the relevant attribute.
The "val" is for the relevant attribute value which can be placed inside single, double or no quotes.
The "^" symbol after the "att" means the value must "start with the relevant string".
/* syntax */
E[att^=val] { }
E[att^='val'] { }
E[att^="val"] { }
/* example */
a[href^="http"] { }
The [att^=val] attribute selector targets any element whose attribute starts with the value.
In the following example, any <a> element with an href that starts with http will be selected.
/* CSS selector */
a[href^="http"] { }
<!-- HTML markup -->
<a href="http://abc.com"></a>
W3C Selectors Level 4
Status: Working Draft
Selectors Level 3
Status: Recommendation
CSS Level 2 (Revision 1)
Status: Recommendation
The [att^=val] attribute selector is not supported by IE6.
Open this HTML file in an editor:
exercises-start/exercise-205-10-05.html
Write a CSS rule to style any <a> element with href value that starts with http. Set to color: cyan.
/* Add styles here */
a[href^="http"] {
color: cyan;
}
Check your work against the finished HTML file:
exercises-finished/exercise-205-10-05.html
The [att$=val] attribute selector is written as "E[att$=value]".
The "E" is for an optional element.
The "att" is for the relevant attribute.
The "val" is for the relevant attribute value which can be placed inside single, double or no quotes.
The "$" symbol after the "att" means the value must "end with the relevant string".
/* syntax */
E[att$=val] { }
E[att$='val'] { }
E[att$="val"] { }
/* example */
a[href$=".pdf"] { }
The [att$=val] attribute selector targets any element whose attribute ends with the value.
In the following example, any <a> element with an href that ends with .pdf will be selected.
/* CSS selector */
a[href$=".pdf"] { }
<!-- HTML markup -->
<a href="form.pdf></a>
W3C Selectors Level 4
Status: Working Draft
Selectors Level 3
Status: Recommendation
CSS Level 2 (Revision 1)
Status: Recommendation
The [att$=val] attribute selector is not supported by IE6.
Open this HTML file in an editor:
exercises-start/exercise-205-10-06.html
Write a CSS rule to style any <a> element with href value that ends with .pdf. Set to color: mediumorchid.
/* Add styles here */
a[href$=".pdf"] {
color: mediumorchid;
}
Check your work against the finished HTML file:
exercises-finished/exercise-205-10-06.html
The [att*=val] attribute selector is written as "E[att*=value]".
The "E" is for an optional element.
The "att" is for the relevant attribute.
The "val" is for the relevant attribute value which can be placed inside single, double or no quotes.
The "*" symbol after the "att" means the value must "contain the relevant string".
/* syntax */
E[att*=val] { }
E[att*='val'] { }
E[att*="val"] { }
/* example */
a[href*="abc.com"] { }
The [att*=val] attribute selector targets any element whose attribute value matches a string.
In the following example, any <a> element with an href value with a string of abc.com will be selected.
/* CSS selector */
a[href*="abc.com"] { }
<!-- HTML markup -->
<a href="http://www.abc.com></a>
W3C Selectors Level 4
Status: Working Draft
Selectors Level 3
Status: Recommendation
CSS Level 2 (Revision 1)
Status: Recommendation
The [att*=val] attribute selector is not supported by IE6.
Open this HTML file in an editor:
exercises-start/exercise-205-10-07.html
Write a CSS rule to style any <a> element with href value that contains the string example.com. Set to color: mediumpurple.
/* Add styles here */
a[href*="example.com"] {
color: mediumpurple;
}
Check your work against the finished HTML file:
exercises-finished/exercise-205-10-07.html
Site Twitter Github Slideshare Linkedin