CSS Selectors Flashcards
What will this selector target?
.intro {
color: blue
{
Selects all elements with class=”intro”
What will this selector target?
#firstname {
color: blue
{
Selects the element with id=”firstname”
What will this selector target?
- {
color: blue
{
Selects all elements
What will this selector target?
p {
color: blue
{
Selects all p elements p
What will this selector target?
div, p {
color: blue
{
Selects all div elements and all p elements
What will this selector target?
div > p {
color: blue
{
Selects all p elements where the parent is a div> element
What will this selector target?
div + p {
color: blue
{
Selects all p> elements that are placed immediately after div> elements
What will this selector target?
p ~ ul {
color: blue
{
Selects every ul> element that are preceded by a p> element
What will this selector target?
[target] {
color: blue
{
Selects all elements with a target attribute
What will this selector target?
[target=_blank] {
color: blue
{
Selects all elements with target=”_blank”
What will this selector target?
[title~=flower] {
color: blue
{
Selects all elements with a title attribute containing the word “flower”
What will this selector target?
[lang|=en] {
color: blue
{
Selects all elements with a lang attribute value starting with “en”
What will this selector target?
a[href^=”https”] {
color: blue
{
Selects every a> element whose href attribute value begins with “https”
What will this selector target?
a[href$=”.pdf”] {
color: blue
{
Selects every a> element whose href attribute value ends with “.pdf”
What will this selector target?
a[href*=”w3schools”] {
color: blue
{
Selects every a> element whose href attribute value contains the substring “w3schools”
What will this selector target?
a:active {
color: blue
{
Selects the active link
What will this selector target?
p::after {
color: blue
{
Insert something after the content of each p> element
What will this selector target?
p::before {
color: blue
{
Insert something before the content of each p> element
What will this selector target?
input:checked {
color: blue
{
Selects every checked input> element
What will this selector target?
input:disabled {
color: blue
{
Selects every disabled input> element
What will this selector target?
p:empty {
color: blue
{
Selects every p> element that has no children (including text nodes)
What will this selector target?
input:enabled {
color: blue
{
Selects every enabled input> element
What will this selector target?
p:first-child {
color: blue
{
Selects every p> element that is the first child of its parent
What will this selector target?
p::first-letter {
color: blue
{
Selects the first letter of every p> element
What will this selector target?
p::first-line {
color: blue
{
Selects the first line of every p> element
What will this selector target?
p:first-of-type {
color: blue
{
Selects every p> element that is the first p> element of its parent
What will this selector target?
input:focus {
color: blue
{
Selects the input element which has focus
What will this selector target?
a:hover {
color: blue
{
Selects links on mouse over
What will this selector target?
input:in-range {
color: blue
{
Selects input elements with a value within a specified range
What will this selector target?
input:invalid {
color: blue
{
Selects all input elements with an invalid value
What will this selector target?
p:lang(it) {
color: blue
{
Selects every p> element with a lang attribute equal to “it” (Italian)
What will this selector target?
p:last-child {
color: blue
{
Selects every p> element that is the last child of its parent
What will this selector target?
p:last-of-type {
color: blue
{
Selects every p> element that is the last p> element of its parent
What will this selector target?
a:link {
color: blue
{
Selects all unvisited links
What will this selector target?
:not(p) {
color: blue
{
Selects every element that is not a p> element
What will this selector target?
p:nth-child(2) {
color: blue
{
Selects every p> element that is the second child of its parent
What will this selector target?
p:nth-last-child(2) {
color: blue
{
Selects every p> element that is the second child of its parent, counting from the last child
What will this selector target?
p:nth-last-of-type(2) {
color: blue
{
Selects every p> element that is the second p> element of its parent, counting from the last child
What will this selector target?
p:nth-of-type(2) {
color: blue
{
Selects every p> element that is the second p> element of its parent
What will this selector target?
p:only-of-type {
color: blue
{
Selects every p> element that is the only p> element of its parent
What will this selector target?
p:only-child {
color: blue
{
Selects every p> element that is the only child of its parent
What will this selector target?
input:optional {
color: blue
{
Selects input elements with no “required” attribute
What will this selector target?
input:out-of-range {
color: blue
{
Selects input elements with a value outside a specified range
What will this selector target?
input:read-only {
color: blue
{
Selects input elements with the “readonly” attribute specified
What will this selector target?
input:read-write {
color: blue
{
Selects input elements with the “readonly” attribute NOT specified
What will this selector target?
input:required {
color: blue
{
Selects input elements with the “required” attribute specified
What will this selector target?
:root {
color: blue
{
Selects the document’s root element
What will this selector target?
::selection {
color: blue
{
Selects the portion of an element that is selected by a user
What will this selector target?
#news:target {
color: blue
{
Selects the current active #news element (clicked on a URL containing that anchor name)
What will this selector target?
input:valid {
color: blue
{
Selects all input elements with a valid value
What will this selector target?
a:visited {
color: blue
{
Selects all visited links
