I'm learning css and trying to change background-color of all html except one div tag using :not
element.
When i put like body:not(.one)
it is changing background-color of whole html but not excluding the div mentioned in :not condition. Same problem if i use *:not(.one)
Am i doing correct?
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
body:not(.o开发者_运维知识库ne)
{
background-color:blue;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<div class="one">
this is first div
</div>
<div >
this is second div
</div>
<p>
this is a paragraph
</p>
</body>
</html>
The background color of your div is transparent. It looks to me like you're setting the body color and then expecting the div to be white or such like.
Given the CSS rule you're using, it's only styling the body tag anyway. You don't need to tell it not to style the div because it wasn't going to anyway.
The not()
selector comes in handy when you want to style all div
s for example, except ones that have a given class, such as:
div:not(.items){ /* some styles */}
This makes sens because there may be many div
that we want to style, except div
with the class items
.
Your example in the question doesn't make so much sense because you're styling the body
of which there's only one.
Your statement actually says:
Style all body tags except any body tag that has the class name one
.
The :not
selector is a CCS3 feature which not many browser support. Which browser are you testing in?
If all browsers are to be supported you should probably look into a javascript/jquery solution.
精彩评论