usernameapril / kwk-css-selectors-gems-kwk-students-l1-nyc-080618

ARRR Don't Lose Your Gems!

It's tough being a clumsy pirate. You trip and fall all the time, your parrot flies into things, and occasionally (well, more than just occasionally) you even lose your treasure. Because of all of this, we have to be super careful so Blackbeard doesn't get even more mad at us. We were just sent on a mission to pick up some treasure found on the shore of a deserted island. Let's make sure we get all the gems in our treasure chest!

Let's Get Started

Step 1:

Open this lesson in the Learn IDE

Step 2:

Open index.html in the browser by running in terminal httpserver and copy the provided IP to a new Chrome tab.

You're going to code your solution in css/gems.css. Go ahead and open that file in the Learn IDE text editor, as well as index.html. Please don't make any changes to css/style.css or to index.html.

Move the Ruby

Obviously we want to go for the biggest gem first. As a pirate, there is always the risk of attack by enemy ships. Time is always of the essence, and the ruby is the biggest stone.

Write the correct selector in css/gems.css so that the image tag with id="ruby" is affected.

Once you fill in the selector in css/gems.css Save the changes to css/gems.css and refresh in the browser. You should have put the ruby in the chest. ✓

Move the Emerald

Emeralds are pretty expensive so we should probably collect that gem next.

In css/gems.css, you'll want to replace the text /*selector for emerald goes here */ with the CSS selector.

Save the changes to css/gems.css and refresh in the browser. Emerald done. ✓

Move The Yellow Diamond

Everyone loves a good yellow diamond, so let's make sure we get that gem into our treasure chest. Again, you'll want to look for any classes or ID's defined on the yellow diamond image in index.html.

Save your changes and refresh in the browser. Yellow diamond complete. ✓

Move the Diamond

Take a look at index.html for any classes or ID's defined on the diamond image. Use that as your CSS selector in css/gems.css.

Diamond done. ✓

Move The Sapphire

We saved the hardest for last, this way if we get attacked now, we can run away with four gems instead of just one. The sapphire is going to be pretty tricky to move. There aren't any IDs or classes defined on the img tag. But, if you look carefully, you'll notice the img tag linking the sapphire is nested inside of a div with the id sand. This img tag is known as a child element of the parent, which is the div.

    <div id="sand">
      <img src="images/sapphire-gem.png" alt="Sapphire">
    </div>

In order to select the sapphire image in our CSS, we can use what's called a descendant selector. In css/gems.css you'll want to replace the text /*selector for sapphire goes here */ with #sand img.

#sand img is our CSS selector. This selector will first look for an HTML tag with the ID sand, and from there, look for the img child HTML element, and apply that styling to the img.

Sapphire. ✓