<style>

</style>

Q2: Set the following flex elements in opposite direction

current order: 1. Heading Left → 2. Heading Middle → 3. HEADING

desired order: 3. HEADING → 2. Heading Middle → 1. Heading Left

Q3: Apply visual effects to <img> elements

There are many different ways for image/picture styling by accessing attributes such as class, id, etc.
This time, let's set some visual effect to the following <img>s only using custom attribute.
Each <img> has a custom attribute as a css selector one through seven without value.

For example, the first <img> is the original image with the custom attribute one.
You can test to select the element using CSS selector e.g., #img img[one] {} or img[one] {}

Custom attribute in HTML is not new stuff and can be used to css-select HTML element in addition to tags, id, class, :nth-child, or :nth-of-type().

● You are required to apply a visual effect to each <img> using the CSS property filter from the second <img> to the last one whose attribute name go two, three, and so forth respectively in order.

● To check what css value to apply, refer to the caption at bottom-right corner on each image. They are NOT valid syntax, but are enough to get what to do!

● On writing a valid css code, you will see the change applied. Just move to next one then!

             <div id="img">
  <img one src="path_to_image">
</div>

<div id="img">
  <img two src="path_to_image">
</div>

<div id="img">
  <img three src="path_to_image">
</div>

<div id="img">
  <img four src="path_to_image">
</div>

<div id="img">
  <img five src="path_to_image">
</div>

<div id="img">
  <img six src="path_to_image">
</div>

<div id="img">
  <img seven src="path_to_image">
</div>

×

Thanks for using Live CSS Trainer v2.0!