CSS - Selectors Flashcards
:link
The:linkselector is used to select unvisited links.
Note:The :link selector does not style links you have already visited.
:visited
The:visitedselector is used to select visited links.
a:visited{
color:pink;
}
:hover
Select and style a link when you mouse over it:
a:hover{
background-color:yellow;
}
:active
Select and style the active link:
a:active{
background-color:yellow;
}
element>element
Select and style every <p> element where the parent is a </p><div> element:
div > p{
background-color:yellow;
}
</div>
element+element
Select and style the first <p> element that are placed immediately after </p><div> elements:
div + p{
background-color:yellow;
}
</div>
element1~element2
Set a background color for all <ul> elements that are preceded by a <p> element with the same parent:
p ~ ul{
background:#ff0000;
}
</p></ul>
[attribute]
Style all <a> elements with a target attribute:</a>
a[target]{
background-color:yellow;
}
</a>
[attribute=value]
Style <a> elements with a target=”_blank”:</a>
a[target=_blank]{
background-color:yellow;
}
</a>
[attribute~=value]
Select and style elements with a title attribute containing the word “flower”:
[title~=flower]{
background-color:yellow;
}
[attribute|=value]
Select and style elements, where the lang attribute’s value starts with “en”:
[lang|=en]{
background-color:yellow;
}
[attribute^=value]
Set a background color on all <div> elements that have a class attribute value that begins with “test”:
div[class^=”test”]{
background:#ffff00;
}
</div>
[attribute$=value]
Set a background color on all <div> elements that have a class attribute value that ends with “test”:
div[class$=”test”]{
background:#ffff00;
}
</div>
[attribute*=value]
Set a background color on all <div> elements that have a class attribute value containing “test”:
div[class*=”test”]{
background:#ffff00;
}
</div>
::after
Insert some text after the content of each <p> element:
p::after{
content:” - Remember this”;
}
</p>
::before
Insert some text before the content of each <p> element:
p::before{
content:”Read this: “;
}
</p>
:checked
Set the height and width for all checked elements:
input:checked{
height:50px;
width:50px;
}
:default
Add a red shadow color to the default input element:
input:default{
box-shadow:0 0 1px 1px red;
}
:disabled
Set a background color for all disabled input elements of type=”text”:
input[type=”text”]:disabled{
background:#dddddd;
}
:empty
Specify a background color for empty <p> elements:
p:empty{
background:#ff0000;
}
</p>
:enabled
Set a background color for all enabled elements of type=”text”:
input[type=”text”]:enabled{
background:#ffff00;
}
:first-child
Select and style every <p> element that is the first child of its parent:
p:first-child{
background-color:yellow;
}
</p>
::first-letter
Select and style the first letter of every <p> element:
p::first-letter{
font-size:200%;
color:#8A2BE2;
}
</p>
::first-line
Select and style the first line of every <p> element:
p::first-line{
background-color:yellow;
}
</p>
:first-of-type
Specify a background color for the first <p> element of its parent:
p:first-of-type{
background:red;
}
</p>
:focus
Select and style an input field when it gets focus:
input:focus{
background-color:yellow;
}
:fullscreen
Set the background color to yellow when the page is in full-screen mode:
:fullscreen{
background-color:yellow;
}
:hover
Select and style a link when you mouse over it:
a:hover{
background-color:yellow;
}
:in-range
Select and style only if the value of the element is “in range”:
input:in-range{
border:2px solid yellow;
}
:indeterminate
Add a red shadow color to indeterminate inputs:
input:indeterminate{
box-shadow:0 0 1px 1px red;
}
:invalid
Select and style only if the value of the element is invalid:
input:invalid{
border:2px solid red;
}
:lang
Select and style every <p> element with a lang attribute value equal to “it” (Italian):
p:lang(it){
background:yellow;
}
</p>
:last-child
Specify a background color for the <p> element that is the last child of its parent:
p:last-child{
background:#ff0000;
}
</p>
:last-of-type
Specify a background color for the last <p> element of its parent:
p:last-of-type{
background:#ff0000;
}
</p>
:link
Select and style unvisited links:
a:link{
background-color:yellow;
}
::marker
Style the markers of list items:
::marker{
color:red;
}
:not
Set a background color for all elements that are not a <p> element:
:not(p){
background:#ff0000;
}
</p>
:nth-child()
How to use the :nth-child() selector:
/* Selects the second element of div siblings */
div:nth-child(2){
background:red;
}
/* Selects the second li element in a list */
li:nth-child(2){
background:lightgreen;
}
/* Selects every third element among any group of siblings */
\:nth-child(3){
background:yellow;
}
:nth-last-child()
Specify a background color for every <p> element that is the second child of its parent, counting from the last child:
p:nth-last-child(2){
background:red;
}
</p>
:nth-last-of-type()
Specify a background color for every <p> element that is the second p element of its parent, counting from the last child:
p:nth-last-of-type(2){
background:red;
}
</p>
:nth-of-type()
How to use the :nth-of-type() selector:
/* Selects the second element of div siblings */
div:nth-of-type(2){
background:red;
}
/* Selects the second li element in a list */
li:nth-of-type(2){
background:lightgreen;
}
/* Selects every third element among any group of siblings */
\:nth-of-type(3){
background:yellow;
}
:only-of-type
Specify a background color for every <p> element that is the only child of its type, of its parent:
p:only-of-type{
background:#ff0000;
}
</p>
:only-child
Specify a background color for every <p> element that is the only child of its parent:
p:only-child{
background:#ff0000;
}
</p>
:optional
Select and style only if the element does not have a “required” attribute:
input:optional{
background-color:yellow;
}
:out-of-range
Select and style only if the value of the element is “out of range”:
input:out-of-range{
border:2px solid red;
}
::placeholder
Change the color of the placeholder text of an input field:
::-webkit-input-placeholder{/* Edge */
color:red;
}
:-ms-input-placeholder{/* Internet Explorer 10-11 */
color:red;
}
::placeholder{
color:red;
}
:read-only
Select and style only if the input element is “readonly”:
input:read-only{
background-color:yellow;
}
:read-write
Select and style only if the input element is not “readonly”:
input:read-write{
background-color:yellow;
}
:required
Select and style only if the element has a “required” attribute:
input:required{
background-color:yellow;
}
:root
Set the background color for the HTML document:
:root{
background:#ff0000;
}
::selection
Make the selected text red on a yellow background:
::selection{
color:red;
background:yellow;
}
:target
Highlight active HTML anchor:
:target{
border:2px solid #D4D4D4;
background-color:#e5eecc;
}
:valid
Select and style only if the value of the element is valid:
input:valid{
background-color:yellow;
}
:visited
Select and style visited links:
a:visited{
color:pink;
}
element element
Select and style every <p> element that is inside </p><div> elements:
div p{
background-color:yellow;
}
</div>
element,element
Select and style all <h2> elements AND all </h2><p> elements:
h2, p{
background-color:yellow;
}
</p>
element.class
Select and style every <p> element with the class “intro”:
p.intro{
background-color:yellow;
}
</p>
element
Select and style all <p> elements:
p{
background-color:yellow;
}
</p>
*
Select all elements, and set their background color to yellow:
*{
background-color:yellow;
}
id
Style the element with id=”firstname”:
#firstname{
background-color:yellow;
}
.class
Select and style all elements with class=”intro”:
.intro{
background-color:yellow;
}
