I want the first class .tab immediately following the class .tab-wrapper to be visible, the rest should not be displayed
<ul class="tabs">
<li>1</li>
<li>2</li>
</ul>
<div class="tab-wrapper">
<div class="tab">VISIBLE</div>
<div class="tab"></div>
<div class="tab">
<ul class="tabs">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<div class="tab-wrapper">
<div class="tab">VISIBLE</div>
<div class="tab"></div>
<div class="tab"></div>
</div>
</div>
</div>
This is my css. For some reason the first .tab of the second .tab-wrapper does not display...
How do i fix it?
Thanks
.tab-wrapper .tab {display: none;}
.tab-wrapper .tab:first-child {display: block;}
This is working, although when I copied/pasted your code it did not? (Of course, copying your CSS into the fiddle now appears to work. If you're trying to get the second VISIBLE to display, you're out of luck unless you modify your methodology.)
.tab-wrapper .tab {
display: none;
}
.tab-wrapper .tab:first-child {
display: block;
}
http://jsfiddle.net/zW7dz/
Also, as #barmar points out, your second inner/inner .tab can't be shown because it's parent (.tab) is going to get the display: none. You can't see it if it's parent is not visible.
Related
This is my first time posting here, so please go easy on me.
The following adds line height, removes the default bullet point and adds a symbol before all list items in the body of the stylesheet.
NOTE: I use Beaver Builder page plugin for wordpress. "fl-page-content" class excludes the header and the footer as i do not want the menus in them being affected.
ul {
list-style: none;
}
.fl-page-content ul li:before {
content: ">\00a0" ;
line-height:2;
}
I have found 1 list where i do not want the above changes to take effect though. I have added a class "Missing" to this list and am trying to exclude it using the "not" property.
ul {
list-style: none;
}
.fl-page-content:not(.
Missing) ul li:before{
content: ">\00a0" ;
line-height:2;
}
It accepts the syntax but the list in question is still using the added symbol and line height.
Would really appreciate some advice on this.
Many thanks
I saw this exemple before in the morning, hope this can help you
div:not(.missing) ul.group li {
border: 1px solid red;
}
<body class="page">
<div class="missing">
<ul class="group">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
<div class="page-section">
<ul class="group">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</body>
>here< is a JSFiddle I made for you to try it
I'm trying to build a simple drilldown in Bootstrap. When the user selects a "row", I want the background color to change to indicate what "row" is selected. It only works like I want it on the first level rows.
Here's the basic HTML:
<div class="container">
<ul class="nav nav-drilldown" id="Menu">
<li>
Thing the first
<ul class="collapse" id="a">
<li>child 1</li>
<ul class="collapse" id="a-child-1">
<li>
<div class="row">
<div class="col-md-6">something</div>
<div class="col-md-3">goes</div>
<div class="col-md-3">here</div>
</div>
</li>
</ul>
</ul>
</li>
</ul>
</div>
And the CSS:
.nav-drilldown:focus {
background-color: #eee;
}
.nav-drilldown li li a:focus {
background-color: #FF0000;
}
.nav-drilldown li a:focus {
background-color: #eee;
}
For the second level, on the text part of the anchor changes background color. I get that you can't set selected on a <li>, but i don't understand why the second level doesn't behave like the first level. I can't get the third level to much of anything.
Level 1:
Level 2:
JSFiddle
I believe this is just a matter of the padding on the anchor tag. At the top level, you have 10px top and bottom padding and on the second level anchor tag, you have no padding. So, if you want similar behavior, you could add:
.nav-drilldown li li a {
padding: 10px 15px;
}
I can't seem to find an answer to this so either it's not possible or i'm not wording my searches correctly - i'm hoping someone on here can help? :)
I have some HTML (UL in my example) who's grand-parent (div) occasionally has a sibling and occasionally doesn't. An example of this might be :
No Sibling Example
<section>
<div>
<div id="item">
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</div>
</div>
</section>
Sibling Example
<section>
<div id="sibling1">xxx</div>
<div>
<div id="item">
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</div>
</div>
<div id="sibling2">yyyy</div>
</section>
I want to select the UL element only when it's grandparent (div) has siblings.
I was going to use the preceding selector.. something like
section div div#item ~ ul
{
background: #ff0000;
}
but I cant seem to get it to work.
Any guidance greatly appreaciated!
section div~div div#item ul
{
background: #ff0000;
}
You need to select the parent div if it has a sibling. I'm not sure what your original selector was doing, but it was wrong.
Snippet with:
section div~div div#item ul
{
background: #ff0000;
}
<section>
<div id="sibling1">xxx</div>
<div>
<div id="item">
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</div>
</div>
<div id="sibling2">yyyy</div>
</section>
Snippet without:
section div~div div#item ul
{
background: #ff0000;
}
<section>
<div>
<div id="item">
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</div>
</div>
</section>
You can do this:
section>div:not(:only-child) ul{
background: red;
}
Here is a pen with two sections so you can see it works: http://codepen.io/vandervals/pen/qdqMvq
This has 2 advantages from the ~ method:
-It selects all ul from divs not only from one div.
-It is more readable.
I'm not surprised the CSS doesn't work, but I hope you get the idea. There are 2 lists and I'm trying to target the first letter of the first a in the first ul. In this example that's the B of Beauty Salons. Can I do this with CSS without changing the HTML?
CSS:
.tab-pane .category-headings ul:first-of-type a:first-of-type::first-letter {
margin-right: 1px;
padding: 0px 5px;
background-color: #666;
color: #fff;
font-weight: bold;
}
HTML:
<div class="tab-pane" id="b">
<div class="container-fluid category-headings">
<div class="row-fluid">
<div class="span11 offset1">
<div class="row-fluid">
<div class="span4">
<ul class="unstyled">
<li>Beauty Salons & Therapy
</li>
<li>Blinds
</li>
</ul>
</div>
<div class="span4">
<ul class="unstyled">
<li>Book Binders
</li>
<li>Bookkeeping Services
</li>
</ul>
</div>
<div class="span4">
<ul class="unstyled">
<li>Builders
</li>
<li>Building Plans
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
FIDDLE:
http://jsfiddle.net/a4644b8h/2/
It works if you set the <a> tag to be a block display element:
.tab-pane .category-headings ul:first-of-type li:first-of-type a:first-of-type::first-letter {
margin-right: 1px;
padding: 0px 5px;
background-color: #666;
color: #fff;
font-weight: bold;
}
.tab-pane .category-headings ul:first-of-type li:first-of-type a:first-of-type {
display: inline-block;
}
This is because the :first-letter selector will only apply to block elements, and not inline ones.
Here is an example fiddle.
First you need to change a few of those selectors. You aren't looking for ul:first-of-type. This will select the first ul inside each of the <div class="span4"> divs. Instead you want to target the first div with class="span4", like so:
.span4:first-of-type
Next, basically the same thing, you don't want to target a:first-of-type, this will select the first a tag in each of those li elements. Instead, target the first li, like so:
li:first-of-type
And then target the a tag inside that first li
So, to put all that together:
.tab-pane .category-headings .span4:first-of-type li:first-of-type a::first-letter {
}
Also, as Alan mentioned, the parent of the ::first-letter pseudo-element must be a block-level element, so add
.span4 a { /* make this selector as specific as you need it */
display: inline-block;
}
And that should do it. JSFiddle here
I have the following
CSS
.streamBox {
font-size:12px;
background-color:#EDEFF4;
border-bottom:1px solid #E5EAF1;
margin-top:2px;
padding:5px 5px 4px;
}
.streamBox:last-child {
border: none;
}
HTML
<ul id="activityStream">
<li class="story">
<div class="streamBox nobkgcolor" id="">
Stuff
</div>
</li>
<li class="story">
<div class="streamBox nobkgcolor" id="">
Stuff
</div>
</li>
<li class="story">
<div class="streamBox nobkgcolor" id="">
Stuff
</div>
</li>
</ul>
I thought the last-child selector would make it so the last DIV doesn't hav ea border... But instead all DIVs now don't have borders? y?
Suggestions on how w CSS to make it so JUST the last div doesn't have the border?
Thanks,
For updated question:
Your selector needs a tweak, it should be:
li:last-child .streamBox {
border: none;
}
The <div class="streamBox"> is both the first and last child of its parent, so your current selector matches all of them, instead you want the <div> inside the last <li>, so use the :last-child on the <li>, you can test it here (I changed the border to black to make it more obvious).
For previous question:
It's because you're missing a quote on the class="" attribute, fix it like this:
<div class="box">blah blah</div>
<div class="box">blah blah</div>
<div class="box">blah blah</div>
<div class="box">blah blah</div>
It'll then work as intended, the first 3 having borders, you can test it here.