CODEWITHSUNDEEP
htmlcssclasstagselement
Elio Briceño
Elio Briceño

Reputation: 63

choosing specific elements within a div with a determined class in CSS

I'm having a hard time with some CSS beginners stuff. I'm currently taking the CodeAcademy CSS course and I've got a doubt right here:

.review { 
    background-color: #E6EBF5; /* pale blue */
    border: 1px solid #003399; /* dark blue */
}
p.review { 
    font-style: italic;
    color: red;
}
<!DOCTYPE html>
<html>
<head>	
    <title>MyWebPage</title>
    <link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
    <link href= "style.css" type= "text/css" rel="stylesheet">
</head>
<body>
    <div class="review">
        <h2>The Godfather</h2>
        <p>The Godfather (1972) is the greatest movie of all time, 
               according to numerous surveys of movie critics and audiences alike.</p>
        <p>The Godfather is... (your review here)</p>
    </div>
    <div class="review">
        <h2>Avatar</h2>
        <p>Avatar (2009) is the highest grossing film of all time, 
               earning approximately $2.8 billion.</p>
        <p>Avatar is... (your review here)</p>
    </div>
</body>
</html>

From what I've understood, with the p.review command I should be styling all <p> elements with a review class but that doesn't seem to be the case. Hopefully, someone can explain this to me.

Upvotes: 0

Views: 3697

Answers (4)

viCky
viCky

Reputation: 864

Think of it as a family tree. What you are doing is choosing a child in that family. You can either select all the children of a parent Or you can select all the children with a special property.

In your HTML, review class is given to the parent of "p"

<div class="review">
  <p>... some text ...</p>
</div>

To select all children of parent with review class, you need to write:

.review p {
   /*your css goes here*/
}

/* OR */

.review > p {
   /*your css goes here*/
}

(this means, find all elements with class review, then find all p inside those elements.)

This will select all "p" tags inside the elements with class "review".

But if you want to choose all "p" that have class "review" then your code will be like this: 

<div>
  <p class="review">... some text ...</p>
</div>

and css will be 

p.review {
   /*your css goes here*/
}

(this mean, find all p which have class review)

I hope this makes it clear.

Upvotes: 3

Kartikeya Jain
Kartikeya Jain

Reputation: 11

The p.class selector selects all the p tag elements with that particular class.

When you use .class in CSS it affects all the HTML elements with that class, but when you use HTMLElemet.class (eg.p.large or h1.small), the class only affects that particular HTML element having the specified class.

To style a <p> element with class review you should use something like

<p class="review" >Text</p>

Upvotes: 1

Ananth A
Ananth A

Reputation: 331

p.review looks for p element with class review. But In your code, p doesn't have any class review. Only div has class review.

If you are using 

<p class="review">Avatar is... (your review here)</p>

Then p element will display in italic style with red font. I have updated your snippet.

.review { 
    background-color: #E6EBF5; /* pale blue */
    border: 1px solid #003399; /* dark blue */
  }
 p.review { 
  	font-style: italic;
	  color: red;
  }
<!DOCTYPE html>
<html>
	<head>	
		<title>MyWebPage</title>
		<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
		<link href= "style.css" type= "text/css" rel="stylesheet">
	</head>
	<body>
		  <div class="review">
					<h2>The Godfather</h2>
					<p>The Godfather (1972) is the greatest movie of all time, 
					according to numerous surveys of movie critics and audiences alike.</p>
					<p>The Godfather is... (your review here)</p>
			</div>
			<div class="review">
					<h2>Avatar</h2>
					<p>Avatar (2009) is the highest grossing film of all time, 
					earning approximately $2.8 billion.</p>
					<p class="review">Avatar is... (your review here)</p>
			</div>
	</body>
</html>

Upvotes: 0

Niles Tanner
Niles Tanner

Reputation: 4041

When you use p.review it really means for every p tag that also has a class review, apply these styles. It does not apply the class review to the p tag. Instead you could just use the selector p or add the class review to those p tags you want changed.

Upvotes: 0

Related Questions