3 replies [Last post]
john kabbi
john kabbi's picture
Offline
newbie
Last seen: 4 years 2 weeks ago
Timezone: GMT+3
Joined: 2014-05-19
Posts: 7
Points: 12

i have the following html file :

<!DOCTYPE html>
<html>
	<head>
		<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
		<title>some title</title>
	</head>
	<body>
		<p>intro</p>
		<div>
			<p>some paragraph</p>
			<ul>
				<li><p>text 1</p></li>
				<li><p>text 2</p></li>
				<li><p>text 3</p></li>
			</ul>
		</div>
		<p>final text</p>
	</body>
</html>

and the following CSS file :

div p {
	color :blue;
}

when i open the html file in the browser the paragraphs "text 1" ,"text 2" and "text 3" appear blue. Smile

the question is : because i wrote in the css file "div p" i expect only < p > that have a parent of < div > be affected. why other < p > that are enclosed in < li > and < ul > are affected ?

helldog2004
helldog2004's picture
Offline
Enthusiast
Netherlands
Last seen: 4 years 3 days ago
Netherlands
Timezone: GMT+2
Joined: 2014-03-02
Posts: 205
Points: 239

Because the paragraphs inside

Because the paragraphs inside the li's are also in a div.
it will take all paragraphs inside a div.

Try to add this code inside your css file:
div ul p { color: black;}

Now all paragraphs in your div are blue except the paragraphs inside your ul.
I made a JSfiddle for you to check the code in action.
Cheers, Henk!

Check Maximum Webdesign for your online solutions

john kabbi
john kabbi's picture
Offline
newbie
Last seen: 4 years 2 weeks ago
Timezone: GMT+3
Joined: 2014-05-19
Posts: 7
Points: 12

thank you for both the reply

thank you for both the reply and for telling me about JSfiddle.

helldog2004
helldog2004's picture
Offline
Enthusiast
Netherlands
Last seen: 4 years 3 days ago
Netherlands
Timezone: GMT+2
Joined: 2014-03-02
Posts: 205
Points: 239

You are more then welcome

You are more then welcome Smile

Check Maximum Webdesign for your online solutions