I have two items
One with classes:
navbar__item dropdown-wrap navbar__item-layout
and two with classes:
navbar__item dropdown-wrap
I want like to hide item two without hide item one.
It's pretty simple using the :not(X) directive where X is the selector you don't want the styling rules to apply.
Let's take the following:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<h2 class="navbar__item dropdown-wrap navbar__item-layout">Hello</h2>
<h2 class="navbar__item dropdown-wrap">Hello 2</h2>
</body>
</html>
And the CSS:
.navbar__item.dropdown-wrap:not(.navbar__item-layout) {
font-size: 11em;
}
This should work in your case! :)
What are we doing here?
We are telling the CSS style processor that we want to apply the style rules to items with the classes .navbar__item .dropdown-wrap but at the same time, the element can't contain the class .navbar__item-layout. You can go pretty complex by using :nth-child or parent, etc.
You can do that by using :nth-child (see more here).
Related
In CSS, what is the difference between static (default) positioning and relative positioning?
Static positioning is the default positioning model for elements. They are displayed in the page where they rendered as part of normal HTML flow. Statically positioned elements don't obey left, top, right and bottom rules:
Relative positioning allows you to specify a specific offset (left, top etc) which is relative to the element's normal position in HTML flow. So if I have a textbox inside a div I could apply relative positioning on the textbox to have it display at specific place relative to where it would normally be placed within the div:
There is also absolute positioning - whereby you specify the exact location of the element relative to the entire document, or the next relatively positioned element further up the element tree:
And when a position: relative is applied to a parent element in the hierarchy:
Note how our absolutely-position element is bound by the relatively-positioned element.
And lastly there is fixed. Fixed positioning restricts an element to a specific position in the viewport, which stays in place during scroll:
You may also observe the behaviour that fixed-positioned elements do not cause scroll because they are not considered to be bound by the viewport:
Whereas absolutely-positioned elements are still bound by the viewport and will cause scrolling:
..unless of course your parent element uses overflow: ? to determine the behaviour of the scroll (if any).
With absolute positioning and fixed positioning, the elements are taken out of HTML flow.
In answer to "why CSS would still implement position: static;" in one scenerio, using position:relative for a parent and position:absolute for the child limits the scaling width of the child. In a horizontal menu system, where you could have 'columns' of links, using 'width:auto' does not work with relative parents. In this case, changing it to 'static' will allow the width to be variable dependent on the content within.
I spent a good few hours wondering why I couldn't get my container to adjust based on the amount of content within it. Hope this helps!
You can see a simple overview here: W3School
Also, if I recall correctly, when declaring an element relative, it will by default stay in the same place as it otherwise should, but you gain the ability to absolutely position elements inside it relatively to this element, which I've found very useful in the past.
Position relative lets you use top/bottom/left/right for positioning. Static won't let you do this unless you use margin parameters. There's a difference between Top and margin-top.
You won't need to use static much as it's default
Relative position is relative to the normal flow. The relative position of that element (with offsets) is relative to the position where that element would have been normally if not moved.
Matthew Abbott has a really good answer.
Absolute and relative positioned items obey top, left, right and bottom commands (offsets) where static positioned items do not.
Relatively positioned items move offsets from where they would normally be in the html.
Absolute positioned items move offsets from the document or the next relatively positioned element up the DOM tree.
Static: By default the position of elements is static. If you add property such as top, bottom, right, or left nothing will be implemented.
div{
width:200px;
height:200px;
background-color:yellow;
display:inline-block;
}
#middle{
background-color:pink;
}
#static #middle{
position:static;
top:100px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<h1>Position Property</h1>
<section id="static">
<h2>Static</h2>
<div></div>
<div id="middle"></div>
<div></div>
</section>
</body>
</html>
Relative: The change in position will be relevant to that div's original place.
div{
width:200px;
height:200px;
background-color:yellow;
display:inline-block;
}
#middle{
background-color:pink;
}
#relative #middle{
position:relative;
top:100px;
left:100px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<h1>Position Property</h1>
<section id="relative">
<h2>Relative</h2>
<div></div>
<div id="middle"></div>
<div></div>
</section>
</body>
</html>
Absolute: It is positioned relative to its closest positioned ancestor, if any; otherwise, it is placed relative to the initial containing block. Source:MDN
div{
width:200px;
height:200px;
background-color:yellow;
display:inline-block;
}
#middle{
background-color:pink;
}
#absolute{
position:relative;
}
#absolute #middle{
position:absolute;
top:10px;
left:10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<h1>Position Property</h1>
<section id="absolute">
<h2>Absolute</h2>
<div></div>
<div id="middle"></div>
<div></div>
</section>
</body>
</html>
Fixed: The fixed property would stay at the same place even after we scroll the page. The position is relative to the containing block always.
div{
width:200px;
height:200px;
background-color:yellow;
display:inline-block;
}
#middle{
background-color:pink;
}
#fixed #middle{
position:fixed;
top:10px;
left:10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<h1>Position Property</h1>
<section id="fixed">
<h2>Fixed</h2>
<div></div>
<div id="middle"></div>
<div></div>
</section>
</body>
</html>
Question 1:
Is css possible to make the corner of a img or a div to this?
I don't concern browser support problem, are any css1 or css2 or css3 can make this in easy way?
Question 2:
Can I prevent the css for deepLevel1 which not affect to deepLevel2, without adding any css to deepLevel2
I mean the css will only affect to own level, not deeper level
I only want abc is red, and 123 is still black color.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
#deepLevel1
{
color:red;
}
#deepLevel2
{
}
</style>
</head>
<body>
<div id="deepLevel1">
abc<div id="deepLevel2">123</div>
</div>
</body>
</html>
Hey now you can do easily as like this
check to this live demo http://jsfiddle.net/pkZ8G/1/
more info http://www.freshdesignweb.com/useful-example-css3-style.html
Question 2: You cannot prevent the color being applied without overriding it in your deepLevel2 id style.
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(.one)
{
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 divs 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.
Here is two spans(in real life a lot of spans) situated at the web page. I would like to set the distance betwwen them. I want to use margin-bottom attribute for this, but I can't see any affect of using it. The spans are still on the previous position. That is wrong.
Here is my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title></title>
<style type="text/css">
.position, .name{
overflow: hidden;
}
.position{
margin-bottom: 40px;
}
</style>
</head>
<body>
<span class="position">Designer</span><br/>
<span class="name">John Smith</span>
</body>
</html>
span is an inline element, not a block element, and they don't respect (vertical) margin. You can use padding or make the span display:inline-block; and then use margins. The latter is now supported in most somewhat newer browsers.
I would say line-height is what you are looking for.
Can we give width and border to <body> and use in place of Container div? see this example
see source code of this file and code of file is also perfectly W3C valid. and looking same in IE 7 and firefox 3.5.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" dir="ltr">
<head>
<title> Width in body</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<style type="text/css">
html { background-color: #00f; }
body{background: #cd5c5c;width:800px;height:400px;border:1px solid;color: #fff;margin:0 auto;}
</style>
</head>
<body>
<p>Hello world!</p>
</body>
</html>
Your example answers your question! Body is a block element like any other. It has width, height, padding, margin and border properties.
Note that it is essential that the page is rendered in strict, rather than quirks, mode to be able to treat the body element as a block-level element; otherwise it is treated as the documentElement and all bets are off. – NickFitz
Then can we use body in place of #container div? – Jitendra
Nice theory. Shame about Microsoft. – David Dorward
#Jitendra: you can, but be thorough with your cross-browser testing, particularly when it comes to scrolling :-) – NickFitz
What is the difference between viewport and body? – Jitendra
the viewport is the visible area of the browser window which displays the document. The body is an element in the document. In quirks mode, the body will also be treated as the documentElement: that is, the root node of the document, which will fill the window, and if necessary will be able to be scrolled. In strict mode, the html element will be treated as the documentElement, and the body will be a child of that. As an experiment, change your test page by adding the style rule html { background-color: #00f; } - you will see that the html element contains the `body' – NickFitz