I had written a webpage utilizing class and id names for nearly all elements and realized this is probably not the most succinct way to accomplish my styling. I have been trying to move to a more "DOM Traversing" way of styling but there seems to be issues with one style overwriting another. For example my navbar looks like the following:
<nav>
<li class="navbar--link">Link 1</li>
<ul class="dropdown-custom" id="1">
<li><a style="color: black" href="#">Client 1</a></li>
<li><a style="color: black" href="#">Client 2</a></li>
<li><a style="color: black" href="#">Client 3</a></li>
<li><a style="color: black" href="#">Client 4</a></li>
</ul>
<li class="navbar--link">Link 2</li>
<ul class="dropdown-custom" id="2">
<li><a style="color: black" href="#">Peabody, MA</a></li>
<li><a style="color: black" href="#">Newton, MA</a></li>
<li><a style="color: black" href="#">Dallas, TX</a></li>
<li><a style="color: black" href="#">Houston, TX</a></li>
</ul>
<li>LOGO</li>
<li class="navbar--link">Link 3</li>
<ul class="dropdown-custom" id="3">
<li><a style="color: black" href="#">1</a></li>
<li><a style="color: black" href="#">2</a></li>
<li><a style="color: black" href="#">3</a></li>
<li><a style="color: black" href="#">4</a></li>
</ul>
<li class="navbar--link">Link 4</li>
<ul class="dropdown-custom" id="4">
<li><a style="color: black" href="#">A</a></li>
<li><a style="color: black" href="#">B</a></li>
<li><a style="color: black" href="#">C</a></li>
</ul>
</nav>
...and I was having trouble styling the a within the ul without also effecting the a outside the ul. I tried using many permutations nav > ul > li > a as well as the + selector, but was not having any luck. Is this something I am doing wrong or is there some other way to select ONLY the li within a ul?
The solution is exactly what you indicated in your question,
Try using 'direct child of' > ,
Try restart the browser and load the page to see if the changes take place.
Also the problem could be that some elements have been styled,
eg the li have inline styling which has the highest priority compared to external stylesheet.
nav > ul > li > a
{
text-decoration:none;
}
nav > li > a
{
color:green;
}
<nav>
<li class="navbar--link">Link 1</li>
<ul class="dropdown-custom" id="1">
<li><a style="color: black" href="#">Client 1</a></li>
<li><a style="color: black" href="#">Client 2</a></li>
<li><a style="color: black" href="#">Client 3</a></li>
<li><a style="color: black" href="#">Client 4</a></li>
</ul>
<li class="navbar--link">Link 2</li>
<ul class="dropdown-custom" id="2">
<li><a style="color: black" href="#">Peabody, MA</a></li>
<li><a style="color: black" href="#">Newton, MA</a></li>
<li><a style="color: black" href="#">Dallas, TX</a></li>
<li><a style="color: black" href="#">Houston, TX</a></li>
</ul>
<li>LOGO</li>
<li class="navbar--link">Link 3</li>
<ul class="dropdown-custom" id="3">
<li><a style="color: black" href="#">1</a></li>
<li><a style="color: black" href="#">2</a></li>
<li><a style="color: black" href="#">3</a></li>
<li><a style="color: black" href="#">4</a></li>
</ul>
<li class="navbar--link">Link 4</li>
<ul class="dropdown-custom" id="4">
<li><a style="color: black" href="#">A</a></li>
<li><a style="color: black" href="#">B</a></li>
<li><a style="color: black" href="#">C</a></li>
</ul>
</nav>
.dropdown-custom > li {
//style li here
}
This would style all li elements inside a div with the class .dropdown-custom, with the same style, while not styling any li elements outside the .dropdown-custom div.
Related
I need a dropdown like this inside a tab like this, I want the dropdown as tab using Materialize. How can I do this?
HTML:
<nav class="nav-extended">
<div class="nav-wrapper">
<div class="top-nav">
<i class="material-icons">menu</i>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li>Sass</li>
<li>Components</li>
<li>JavaScript</li>
</ul>
</div>
<ul class="side-nav" id="mobile-demo">
<li>Sass</li>
<li>Components</li>
<li>JavaScript</li>
</ul>
<ul class="drop-tab">
<li>
<!--Disabled Tab-->
</li>
</ul>
<ul materialize="tabs" class="tabs tabs-transparent">
<li class="tab space-tab"><a class="active" href="#test2">Test 2</a></li>
<li class="tab">Disabled Tab</li>
<li class="tab">Test 4</li>
<li class="tab">Test 2</li>
<li class="tab">Disabled Tab</li>
<li class="tab"><a materialize="dropdown" href="#" class="dropdown-button" data-activates="dropdown1">Dropdown</a></li>
</ul>
</div>
</nav>
<div>something</div>
<ul id="dropdown1" class="dropdown-content black white-text">
<li>one</li>
<li>two</li>
<li class="divider"></li>
<li>three</li>
</ul>
CSS:
.tabs {
overflow-x: visible !important;
overflow-y: initial !important;
}
JS
$(document).ready(function() {
$('.dropdown-button').dropdown();
});
Dropdown in nav-extended what you want is an open issue for more information you can see the following link - github issues #3920
I have ul elements like below in my html
<ul class="nav" id="loadCategories">
<li class="sub-menu">Search by category
<ul class="">
<li>Food</li>
<li>Sports</li>
<li>Personal</li>
</ul>
</li>
<li class="sub-menu">Search by city
<ul class="">
<li>Mumbai</li>
<li>Bangalore</li>
<li>Personal</li>
</ul>
</li>
</ul>
Now I want to use a button just below this ul. But when I put something like the code below it breaks.
<input type="button" class="signout_btn" value="Sign Out" id="btnSignOut">Signout</input>
So is there any way I can put my button as a li element in order to get the exact same look(CSS).
Here's the fiddle for the same. The button should look like the ul element
Here is the code just add a button in a "li" element and remove bullet.
<ul class="nav" id="loadCategories">
<li class="sub-menu">
Search by category
<ul class="">
<li>Food</li>
<li>Sports</li>
<li>Personal</li>
</ul>
</li>
<li class="sub-menu">
Search by city
<ul class="">
<li>Mumbai</li>
<li>Bangalore</li>
<li>Personal</li>
</ul>
</li>
<li class="no-bullet">
<button type="button" class="signout_btn" id="btnSignOut">Sign Out</button>
</li>
</ul>
Also make the list-style-type to none
.no-bullet{
list-style-type: none
}
Here is a fiddle check it out.Hope it helps!! link
Did you try width=100% and height=100% with set parameters for the list?
you can try this
<ul class="nav" id="loadCategories">
<li><input type="button" class="signout_btn" value="Sign Out" id="btnSignOut">Signout</li>
<li class="sub-menu">Search by category
<ul class="">
<li>Food</li>
<li>Sports</li>
<li>Personal</li>
</ul>
</li>
<li class="sub-menu">Search by city
<ul class="">
<li>Mumbai</li>
<li>Bangalore</li>
<li>Personal</li>
</ul>
</li>
</ul>
<input> elements are empty (you shouldn't use end tags). I prefer to use <button> elements:
<button class="signout_btn" id="btnSignOut">Sign Out</button>
Could you please check with this code?
<ul class="nav" id="loadCategories">
<li class="sub-menu">Search by category
<ul class="">
<li>Food</li>
<li>Sports</li>
<li>Personal</li>
</ul>
</li>
<li class="sub-menu">Search by city
<ul class="">
<li>Mumbai</li>
<li>Bangalore</li>
<li>Personal</li>
</ul>
</li>
<li class="sub-menu">
<button class="signout_btn" id="btnSignOut" style="background: none;border:none;color: #fff;margin-left: 20px;">Sign Out</button>
</li>
</ul>
The output will be:
Please try below code snippet..
<ul class="nav" id="loadCategories">
<li class="sub-menu">Search by category
<ul class="">
<li>Food</li>
<li>Sports</li>
<li>Personal</li>
</ul>
</li>
<li class="sub-menu">Search by city
<ul class="">
<li>Mumbai</li>
<li>Bangalore</li>
<li>Personal</li>
</ul>
</li>
<input type="button" class="signout_btn" value="Sign Out" id="btnSignOut">
</ul>
CSS:
.signout_btn{
text-transform: uppercase;
outline: none;
border: 0;
background-color: #673a9a;
line-height: 40px;
color: #fff; display: inline-block;
font-size: 16px;
margin: 10px;
cursor: pointer;
}
JAVASCRIPT:
$( ".menu" ).click(function() {
$('.slide-menu').addClass('active');
$('.slide-wrapper').addClass('active');
});
$( "li.sub-menu" ).click(function() {
$(this).toggleClass('act');
$(this).find('ul').slideToggle();
});
I need to make the filter button aligned to the menu and modify its css using bootstrap. I am new to bootstrap so cant figure it out. i have tried padding the result but it didnt work. Thank you in advance :)
<ul class="nav navbar-nav container col-md-6">
<li class="dropdown col-md-2">
School <b class="caret"></b>
<ul class="dropdown-menu scrollable-menu">
<li><a href="about_us.php" >About Us</a></li>
<li>Advertise</li>
<li>Team</li>
<li>Art Curator</li>
</ul>
</li>
<li class="dropdown col-md-2">
Category <b class="caret"></b>
<ul class="dropdown-menu scrollable-menu">
<li><a href="about_us.php" >About Us</a></li>
<li>Advertise</li>
<li>Team</li>
<li>Art Curator</li>
<li>Jobs & Internships</li>
</ul>
</li>
<li class="dropdown col-md-2">
Course <b class="caret"></b>
<ul class="dropdown-menu scrollable-menu">
<li><a href="about_us.php" >About Us</a></li>
<li>Advertise</li>
<li>Team</li>
<li>Art Curator</li>
</ul>
</li>
<li class="dropdown col-md-2">
Degree <b class="caret"></b>
<ul class="dropdown-menu scrollable-menu">
<li><a href="about_us.php" >About Us</a></li>
<li>Advertise</li>
<li>Team</li>
<li>Art Curator</li>
</ul>
</li>
<li class="dropdown col-md-2">
Degree <b class="caret"></b>
<ul class="dropdown-menu scrollable-menu">
<li><a href="about_us.php" >About Us</a></li>
<li>Advertise</li>
<li>Team</li>
<li>Art Curator</li>
</ul>
</li>
<li class="col-md-2">
<button type="submit" class="btn btn-mine" >Filter Results</button>
</li>
</ul>
Add the id btnFilter to your "Filter Results" button and add the following css to your stylesheet
#btnFilter {
margin:9px 0 0;
}
.cat > b.caret {
position:absolute;
top:50%;
}
The caret on the category dropdown was falling down so I have adjusted that as well by adding class cat and absolutely positioning the caret.
I have created a pen using html you provided. http://codepen.io/shreya1289/pen/KMKOLg
For that you need to some customization for set the control location in your page like as per below it will helpful to you.
<style type="text/css">
.caret{
margin-left:62px !important;
}
a.dropdown-toggle {
line-height: 0px !important;
}
</style>
here you are not added full html code so may be you need some alteration in above styles.
I'm trying to create spaced tabs. I want about 6-8 of them running across the width of the screen, each with equal distance apart from each other. I also need them to have dropdown ability on hover.
Initially I went with Bootstrap 3 for quick and fast tabs. However, I can't seem to get them to space equally across the width of the page.
Alternatively, I found this awesome snippet of code which is pure css. However, I'm far from a css wizard and making a pure dropdown like the tabs would take me a long time.
Anyone know a solution to the bootstrap 3 problem of spacing or know where I can get a pure css dropdown solution? Bootstrap 3 code below, pure css in jsfiddle link
Thanks!
Code:
<ul class='nav nav-tabs'>
<li class='dropdown'>
<a class='dropdown-toggle' data-toggle='dropdown' href='#'>Test 1</a>
<ul class='dropdown-menu'>
<li><a href='#'>test 1</a></li>
</ul>
</li>
<li class='dropdown'>
<a class='dropdown-toggle' data-toggle='dropdown' href='#'>Test 2</a>
<ul class='dropdown-menu'>
<li><a href='#'>test 2</a></li>
</ul>
</li>
<li class='dropdown'>
<a class='dropdown-toggle' data-toggle='dropdown' href='#'>Test 3</a>
<ul class='dropdown-menu'>
<li><a href='#'>test 3</a></li>
</ul>
</li>
</ul>
You can enclose your code inside a div with container-fluid class. It will help you to utilize entire width of apge.
ul.nav-tabs > li {
width: 33%;
text-align: center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<ul class='nav nav-tabs'>
<li class='dropdown'>
<a class='dropdown-toggle' data-toggle='dropdown' href='#'>Test 1</a>
<ul class='dropdown-menu'>
<li><a href='#'>test 1</a>
</li>
</ul>
</li>
<li class='dropdown'>
<a class='dropdown-toggle' data-toggle='dropdown' href='#'>Test 2</a>
<ul class='dropdown-menu'>
<li><a href='#'>test 2</a>
</li>
</ul>
</li>
<li class='dropdown'>
<a class='dropdown-toggle' data-toggle='dropdown' href='#'>Test 3</a>
<ul class='dropdown-menu'>
<li><a href='#'>test 3</a>
</li>
</ul>
</li>
</ul>
</div>
I have the following HTML structure:
<ol>
<li><a id="a" href="#">Not this</a></li>
<li><a id="b" href="#">Not this</a></li>
<li><a id="c" href="#">This one</a></li>
<li class="active"><span>Not this</span></li>
</ol>
I want to select #c via CSS. I have tried:
ol > li:not(.active):last-child > a {
border: 1px solid green;
}
As I understand it li:not(.active) selects all the li elements but the one with class .active.
On this selection I use :last-child to get the last of these li elements. But this wont work. What's wrong? Is it possible what I'm trying to achieve?
Thank you very much :)
PS: The list length is dynamic and the elements does not have any id that could be used for CSS selection (I just used some in the example to clarify which element I want to select) ;)
The pseudo code that you wrote works! There's no last-child of <li> with no active class. So your code fails any time! Check with another one in which, the last <li> doesn't have an active.
Or you need to use last-of-type. Check the fiddle:
ol > li:not(.active):last-child > a {
border: 1px solid green;
}
ol > li:not(.active):last-of-type > a {
border: 1px solid green;
}
<ol>
<li><a id="a" href="#">Not this</a></li>
<li><a id="b" href="#">Not this</a></li>
<li><a id="c" href="#">This one</a></li>
<li class="active"><span>Not this</span></li>
</ol>
<ol>
<li><a id="a" href="#">Not this</a></li>
<li><a id="b" href="#">Not this</a></li>
<li class="active"><span>Not this</span></li>
<li><a id="c" href="#">This one</a></li>
</ol>
One thing to note is, last-of-type doesn't consider :not(). Check CSS: How to say .class:last-of-type [classes, not elements!]! You might need to use JavaScript or jQuery for this.
Partial Solution
If you know that the Not this always occurs in the last, you can use nth-last-child(2):
ol > li:not(.active):nth-last-child(2) > a {
border: 1px solid green;
}
<ol>
<li><a id="a" href="#">Not this</a></li>
<li><a id="b" href="#">Not this</a></li>
<li><a id="c" href="#">This one</a></li>
<li class="active"><span>Not this</span></li>
</ol>
You could try the following CSS:
ol > li:not(.active):nth-last-child(1) > a,
ol > li:not(.active):nth-last-child(2) > a {
border: 1px solid green;
}
<ol>
<li><a id="a" href="#">Not this</a>
</li>
<li><a id="b" href="#">Not this</a>
</li>
<li><a id="c" href="#">This one</a>
</li>
<li class="active"><a id="d" href="#">Not this</a>
</li>
</ol>
<ol>
<li><a id="e" href="#">Not this</a>
</li>
<li><a id="f" href="#">Not this</a>
</li>
<li class="active"><a id="g" href="#">Not this</a>
</li>
<li><a id="h" href="#">This one</a>
</li>
</ol>
This code would work only if the last two can't have the active class at the same time. If they, at some point, both have the active class, this css would also fail.
Check this out: https://css-tricks.com/useful-nth-child-recipies/
If you want to select only second last child then you can try:
ol li:nth-last-child(2) a{
border:1px solid green
}
<ol>
<li><a id="a" href="#">Not this</a></li>
<li><a id="b" href="#">Not this</a></li>
<li><a id="c" href="#">This one</a></li>
<li class="active"><span>Not this</span></li>
</ol>