Combing CSS class and element selectors

{'type': u'plain'}

We're back with our webpage about donuts and the dangers of eating them.

I'm really liking the warning class that we added to our and our tags.

But I want to make this warning fact stand out even more.

It's got that grey border now, from the "fact" class rule.

But I think it'd look better with a big, thick orange border.

Let's try adding that to the "warning" rule.

So border, 5 px, solid, orange.

Ah, I Iove it. But it's also on the tag

and it doesn't look so good in line with that text there.

I only want it to be on the "warning" paragraph,

not warning text that's in-line like that.

How can I make a more specific CSS rule?

Well, one approach is to make a whole new class-- "warning-paragraph"--

and move the properties there. But we don't have to do that.

Instead, we can tell the browser to only apply the border properties to paragraph tags that have the warning,

but no other tags that have the warning class.

To make that rule, we first write the element we're looking for-- "p"--

then we write a dot, and the class name-- "warning".

That tells the browser to find all tags that have the class name "warning"

and apply the properties inside.

So let's paste this border property in here...

And voila! We've got the border only on the fact and not on the .

We can do that with any combination of elements and class names,

whenever we want the browser to only style particular tags that have a class.

Make sure you follow exactly this sequence:

the tag name, the dot, and then the class name.

If you put a space accidentally between the tag name and the dot, it will not work anymore.

That's because a space means something else in CSS.

And the browser interprets that rule differently.

Stay tuned to find out about that oh-so-special space.