last child selector in div - html

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;
}

Related

Seperate css for 4th sub element in a row

I want to have a separate style for each 4th element in a row.My html structure is like this
<main>
<div class="a">
<div class="container"></div>
</div>
<div class="a">
<div class="container"></div>
</div>
<div class="a">
<div class="container"></div>
</div>
<div class="a">
<div class="container"></div>
</div>
</main>
and css is
.container:nth-child(4n) {
left: -2rem !important;
}
So it doesn't reflect on that 4th element.
Any help is highly appreciated. Thanks in advance.
Given the markup you provided, your selector will never match any of your elements as there is only one child .container element within each .a parent element. What you want to select is the .container child element of every 4th .a parent element, like so:
.a:nth-child(4n)>.container{
left:-2rem;
}
Note that the above is identical to:
main>div:nth-child(4n)>.container{
left:-2rem;
}
If you're asking wht the left property isn't being applied to that element then that's because you also need to give it a position. In this case, relative would probably suit your needs best.
.a:nth-child(4n)>.container{
left:-2rem;
position:relative;
}
Alternatively, you could also achieve the above with a single property by using the translatex transform function (although transform does still require some prefixing].
.a:nth-child(4n)>.container{
transform:translatex(-2em);
}
Update Css
.a:nth-child(4n) {
left: -2rem !important;
color:red;
}
Further Link
Since each .container class is surrounded by <div>'s, you cannot select it directly because there is only one child per <div>. If you want to select every element inside the <main>, you can do something like this:
CSS
main .a:nth-child(4n) {
color: red;
}
<main>
<div class="a">
<div class="container">Hello</div>
</div>
<div class="a">
<div class="container">Hello</div>
</div>
<div class="a">
<div class="container">Hello</div>
</div>
<div class="a">
<div class="container">Hello</div>
</div>
</main>
JSFiddle

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>

Convert a div within a div to inline

I'm trying to convert a div element within a div to inline but its not working as expected.
Code:
HTML
<div id="price-results">
<div id="price"><div>Unit Price</div><div>5</div></div>
<div id="qty"><div>Quantity</div><div>2</div></div>
<div id="total"><div>TotalPrice</div><div>10</div></div>
</div>
CSS
#price,#qty{
display:inline
}
JSFiddle
I agree with the comment before.
Apart form that, your CSS needs to target the inside the container like this:
#price div,
#qty div,
#total div{
display:inline
}
… see this fixed jsFiddle.
Some other notes on your HTML + CSS:
you should consider using classes instead of IDs
You could also
target the elements by a single descendant rule like this (jsFiddle)
#price-results > div div {
display:inline
}
#price-results div{
display:inline
}
Update your css like below
#price, #qty{
display:inline-block;
}
Why dont you use float:left instead of display:inline
Here is the demo
Why nesting so many divs unnecessarilly. Its not compulsary to include every element in div. This works fine :-
<div id="price-results">
<div id="price">Unit Price 5</div>
<div id="qty">Quantity 2</div>
<div id="total">TotalPrice 10</div>
</div>
http://jsfiddle.net/qqTDq/2/
DIVs are block-level elements by default. I would switch the inner-DIVs to SPANs, which are inline by default:
<div id="price-results">
<div id="price"><span>Unit Price</span> <span>5</span></div>
<div id="qty"><span>Quantity</span> <span>2</span></div>
<div id="total"><span>TotalPrice</span> <span>10</span></div>
</div>
If your intention is to align the numbers then I would switch to a table.
*,div{
padding:0;
margin:0;
display:inline;
}
#price,#qty{
display:inline;
border:1px solid red;
}

Why is the :not selector not working

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.

No Margin on Last Children

I'm aware of the ':last-child' pseudo selector in CSS, but what I want to do is remove the margin-bottom from the last child of each 'last' element in the div.
For example:
<div id="box1" class="box">
<div class="input-group"></div>
<div class="input-group"></div>
<div class="input-group"></div>
</div>
<div id="box2" class="box">
<div class="input-group"></div>
<div class="input-group"></div>
<div class="input-group"></div>
</div>
So what I want to happen, is for each .box, I want the last .input-group to have no margin?
Now obviously :last-child will remove the margin-bottom from the immediate-last child of .input-group, but I want it to recognise when it's the last child of each .box, I'm not sure if I'm making sense here or not.
If that isn't possible, what other ways around it are there?
Cheers!
Mark
.input-group:last-child should work without any changes.
.input-group:last-child{
margin-bottom: 0px;
}
JS Fiddle: http://jsfiddle.net/F7W8p/2/
If you have other .input-group elements outside of box you can add .box to the selector:
.box .input-group:last-child{
margin-bottom: 0px;
}
Here is an example showing the selector in action: http://jsfiddle.net/F7W8p/3/
Try this
in your css document.
.box > .input-group:last-child {margin:0;}