Test your skills: Selectors

In this task, use CSS to do the following things, without changing the HTML:

• Make <h1> headings blue.
• Give <h2> headings a blue background and white text.
• Cause text wrapped in a <span> to have a font-size of 200%.

Your final result should look like the image below:

Try updating the live code below to recreate the finished example:

In this task, we want you to make the following changes to the look of the content in this example, without changing the HTML:

• Give the element with an id of special a yellow background.
• Give the element with a class of alert a 1px grey border.
• If the element with a class of alert also has a class of stop, make the background red.
• If the element with a class of alert also has a class of go, make the background green.

Your final result should look like the image below:

Try updating the live code below to recreate the finished example:

In this task, we want you to make the following changes without adding to the HTML:

• Style links, making the link-state orange, visited links green, and remove the underline on hover.
• Make the first element inside the container font-size: 150% and the first line of that element red.
• Stripe every other row in the table by selecting these rows and giving them a background color of #333 and foreground of white.

Your final result should look like the image below:

Try updating the live code below to recreate the finished example:

In this task, we want you to do the following:

• Make any paragraph that directly follows an <h2> element red.
• Remove the bullets and add a 1px grey bottom border only to list items that are a direct child of the ul with a class of list.

Your final result should look like the image below:

Try updating the live code below to recreate the finished example:

In this task, add CSS using attribute selectors to do the following:

• Target the <a> element with a title attribute and make the border pink (border-color: pink).
• Target the <a> element with an href attribute that contains the word contact somewhere in its value and make the border orange (border-color: orange).
• Target the <a> element with an href value starting with https and give it a green border (border-color: green).

Your final result should look like the image below:

Try updating the live code below to recreate the finished example: