Why is the :not selector not working - html

I am trying to figure out why the not selector is not working. Here is my code:
http://jsfiddle.net/8CKJa/15/
CSS:
#full-content, #mobile-content {
display: none;
}
.collapsed .make #mobile-content {
display: block;
}
.content:not(.collapsed) .make #full-content {
display: block;
}
HTML:
<div class="content">
<div class="content collapsed">
<div id="car">
<div class="make">
<div id="full-content">
full content
</div>
<div id="mobile-content">
mobile content
</div>
</div>
</div>
</div>
</div>
I am trying to hide the full-content div. As you can see .content:not(.collapsed) is not suppose to match any of the divs but it is matching the full-content div. How can I hide the full-content div. I am not sure how many .content parents there will be. The collapsed class can disappear if the menu is expanded.

The :not() selector is working as expected. The issue is that your wrapper div has the class of content without collapsed and then you have one with the class collapsed. Removing the first div makes it work as expected.
http://jsfiddle.net/3L7ym/
<div class="content collapsed">
<div id="car">
<div class="make">
<div id="full-content">
full content
</div>
<div id="mobile-content">
mobile content
</div>
</div>
</div>
</div>

Presuming you are looking to key off of .collapsed and you can't know ahead of time how many .content containers you'll have, you may be able to simplify the whole thing by removing the :not selector:
.collapsed #mobile-content {
display: block;
}
.collapsed #full-content, #mobile-content {
display: none;
}
Fiddle here.

Related

Hover effect on a different element

I have this structure:
HTML
<div class="bottom-container">
<div class="double-arrow"></div>
<div class="bottom-box green margin-top">
<h1 class="bottom-box-h1">Box title 1</h1>
<p class="bottom-box-text">It is a long established fact that a reader will be distracted by the readable content</p>
</div>
</div>
The .bottom-box-text isn't displayed on default. It has a display:none property.
I need to display the .bottom-box-text div when I hover over the .double-arrow div. But I cant figure it out.
I have this CSS:
.double-arrow:hover .bottom-box-text {
display: inline;
}
I tried different selectors (like "+" "~"), but it doesn't work.
Thank you if you can help!
You can use general sibling selector to select .bottom-box first:
.bottom-box-text {
display: none;
}
.double-arrow:hover ~ .bottom-box .bottom-box-text {
display: inline;
}
<div class="bottom-container">
<div class="double-arrow">Arrow</div>
<div class="bottom-box green margin-top">
<h1 class="bottom-box-h1">Box title 1</h1>
<p class="bottom-box-text">It is a long established fact that a reader will be distracted by the readable content</p>
</div>
</div>
.double-arrow:hover + div > .bottom-box-text {
display: inline;
}
Basically, when the double arrow is hovered, the div right after is selected and its children having .bottom-box-text will have the effect applied. If it doesn't, you'll maybe have to use !important as an attribute on display.

Html div within div hover display block

How do I make a display:none; div within a div to display the hidden div when I hover over it?
The code:
#inside_content{
display:none;
}
#box:hover #inside_content{
display:block; <!--Dosen't work-->
}
<div id="box">
<div id="inside_content">
</div>
</div>
Is it better to use class?
Your code works very well. See the following code:
#inside_content {
display:none;
}
#box:hover #inside_content{
display:block;
}
<div id="box">
Show content inside!
<div id="inside_content">Hello World</div>
</div>
You don't have content in the div section. Your code
<div id="inside_content">
</div>

A specific media query not working

I have styled the #screen-xs-max and #screen-sm-max. Both of those queries worked. Now I am trying to style #screen-md-max and the styles wont apply to a certain div. Not all styles - just to a particular div. They dont even show up at all when you inspect the element?
HTML:
<div class="screenshot-projects bottom-border wrap" style="background-color:#fff;">
<div class="container">
<div class="row">
<div class="col-md-7">
<div class="projects-img">
<img src="~/Images/img-lgipad.png" />
</div>
</div>
</div>
Less:
#media (max-width:#screen-md-max) {
.screenshot-projects {
projects-img {
max-width: 300px!important;
}
}
}
The only style not applying is the one to the image size - it's instead taking up the entire screen, and this only happens once i resize to medium. At xs and s it's max:100%; and it applies.
You forgot the dot
#media (max-width:#screen-md-max) {
.screenshot-projects {
.projects-img {
max-width: 300px!important;
}
}
}

last child selector in div

I have a parent div and 3 divs inside it. I want to hide the last child div. I tried using last-child CSS selector, but it is not working.
The order of divs:
<div class="wysibb-toolbar">
<div class="wysibb-toolbar-container"></div>
<div class="wysibb-toolbar-container"></div>
<div class="wysibb-toolbar-container">//(This is to be made display:none)
<div class="wysibb-toolbar-btn wbb-code" jQuery110208619481903000815="71"></div>
<div class="wysibb-toolbar-btn wbb-code" jQuery110208619481903000815="71"></div>
</div>
</div>
I have tried this:
div.wysibb-toolbar div:last-child {
display:none;
}
Try this
div.wysibb-toolbar>div:last-child {
display:none;
}
or just
div.wysibb-toolbar-container:last-child{
display:none;
}
or More generic
div.wysibb-toolbar>div.wysibb-toolbar-container:last-child{
display:none;
}
Your problem is that you have mis-typed the word display and have spelt it disply
Try this out
div.wysibb-toolbar div:last-child {
display: none;
}
<div class="wysibb-toolbar">
<div class="wysibb-toolbar-container">Test 1</div>
<div class="wysibb-toolbar-container">Test 2</div>
<div class="wysibb-toolbar-container">Test 3 (should be hidden)</div>
</div>
:last-child selector matches every element that is the last child of its parent.Try this JSFIddle
.wysibb-toolbar-container:last-child {
display:none;
}

Floating Elements in Flexed Divs

I've a 3 column layout. My issue is that content in the second <div> populates from the bottom, as you can see in this fiddle. I would like to align it's content to the top.
Following is the corresponding html
<div class="user-info" style="width: 100%;">
<div id="image-container">
<img src="image.jpeg" height="200px" width="200px">
</div>
<div id="info">
<div class="info-item">
<div class="info-attribute">tullsy</div>
</div>
<div class="info-item">
<div class="info-attribute">tullsy</div>
</div>
<div class="info-item">
<div class="info-attribute">tullsy</div>
</div>
</div>
<div id="button-container">
<input type="button" id="edit_button" value="edit" class="button" onclick="function()">
<br>
</div>
</div>
and css
#image-container {
display: inline-block;
width: 100;
}
#info {
display: inline-block;
}
#button-container {
display: inline-block;
float: right;
padding: 10px;
}
I can fix this issue by applying display: flex; for the container, however it seems I can't float elements inside a flex container.
I've managed to achieve what i want using <br>, as you can see in this fiddle. But i want to achieve the same without using <br>s or fixed padding.
If i understood correctly,
First of all you need to apply a height to the container #info, (So you can avoid using <br>s to add height) Otherwise it'll shrink wrap to the height of it's child items.
Then you can apply vertical-align:top; for aligning the inline-block child items in it to the top without using <br>s
Demo