CODEWITHSUNDEEP
cssxhtmlstrict
user2797361
user2797361

Reputation: 43

How to change the color of specific text inside of a paragraph with only a class selector?

I'm in the process of learning some CSS and one of the questions I've been presented with is this.

I've been presented with this html and I'm supposed to write CSS to provide emphasis (a red color for spicy and a green color for vegetarian) on both the strong tagged vegetarian and spicy menu items as well as their descriptor (the "vegetarian" and "Spicy!!!" in strong tags). I have had some luck with the descriptors by writing the css included beneath the html, but I can't seem to find a combination of selectors that will allow me to separate them. I have yet to have any success with the titles of the menu items without including the non-vegetarian/non-spicy options as well. I should mention that everything must be done with CSS 2.0. If anyone has some insight I would really appreciate it!

Appetizers

  <p>
     <strong>Mozzarella Sticks</strong><br />
     Golden fried and served with marinara sauce. - $7.49<br />
  </p>

  <p>
     <strong>Spicy Buffalo Wings</strong><br />
     An American classic with a kick! Grilled to perfection
     and tossed in the hottest sauce we got! - $8.99<br />
     <strong>Spicy!!!</strong>
  </p>

  <p>
     <strong>Crab Wontons</strong><br />
     Crab, cream cheese, scallions, bell peppers. - $6.99
  </p>

  <p>
     <strong>Vegetable Spring Rolls</strong><br />
     Cabbage, ginger, carrots, celery, scallions, onions,
     black mushrooms, glass noodles, rolled in a crispy
     wrapper. - $6.99<br />
     <strong>Vegetarian</strong>
  </p>

  <p>
     <strong>Nachos</strong><br />
     Creamy white queso blended with fresh tomatoes,
     red onion, cilantro and roasted poblanos. Served
     with warm tortilla chips. - $6.99
  </p>

  <p>
     <strong>Edamame</strong><br />
     Salted soybeans in the pod. - $5.99<br />
     <strong>Vegetarian</strong>
  </p>

Here is my CSS so far

    div#appetizers br + strong
{
color:red;
}

Upvotes: 1

Views: 1991

Answers (1)

PhilD
PhilD

Reputation: 277

Use the :nth-of-type() method to signify which <p> element you want to target. But you can only use css2... That's ok. Use the css2 version which is like this example:

in css3: ol > li:nth-child(3) == css2: ol > li:first-child + li + li

Give it a go on your <p> (assuming you know the containing element to the html you provided) as in something like #somedivID > p:first-child + p strong {color:red;}

Upvotes: 1

Related Questions