I've got the following HTML and CSS code which can also be found and played with here //jsfiddle.net/0k1qah6x/7/
My intent is for the number "1" which has the class "active" not to be red.
.pdf-pagination a:not(.active) {
color: red;
text-decoration: none;
}
<div class="pdf-pagination">
<ul>
<li class="disabled">
<a id="pdfPaginationLink0" href="#" data-page="0">←</a>
</li>
<li class="active">
<a id="pdfPaginationLink1" href="#" data-page="1">1</a>
</li>
<li>
<a id="pdfPaginationLink2" href="#" data-page="2">2</a>
</li>
<li>
<a id="pdfPaginationLink3" href="#" data-page="2">→</a>
</li>
</ul>
</div>
Your anchors don't have the .active class, their parent li do.
You'll have to change your selector and move the :not() deselector to the parent, as follows:
.pdf-pagination li:not(.active) a {
color: red;
text-decoration: none;
}
<div class="pdf-pagination">
<ul>
<li class="disabled">
<a id="pdfPaginationLink0" href="#" data-page="0">←</a>
</li>
<li class="active">
<a id="pdfPaginationLink1" href="#" data-page="1">1</a>
</li>
<li>
<a id="pdfPaginationLink2" href="#" data-page="2">2</a>
</li>
<li>
<a id="pdfPaginationLink3" href="#" data-page="2">→</a>
</li>
</ul>
</div>
Related
I am using bootstrap 5.0
I want to change the color of the list marker when the nav-link is .active
See my code below. Nothing seems to work
nav ul li::marker{
color: #000000;
font-weight: 600;
content: "\2716";
}
.nav-link.active {
color: #000000;
font-weight: 700;
}
<nav id="navbar" class="navbar navbar-light d-none d-md-flex flex-md-column align-items-beginning">
<ul>
<li class="nav-item">
<a class="nav-link active" href="#item1">Item 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#item2">Item 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#item3">Item 3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#item4">Item 4</a>
</li>
</ul>
</nav>
using jQuery you can change marker color
$(document).ready(function () {
$(".nav-link.active").parents('li').css("color", "red");
});
nav ul li::marker{
font-weight: 600;
content: "\2716";
}
.nav-link.active {
color: #000000;
font-weight: 700;
}
<nav id="navbar" class="navbar navbar-light d-none d-md-flex flex-md-column align-items-beginning">
<ul>
<li class="nav-item">
<a class="nav-link active" href="#item1">Item 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#item2">Item 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#item3">Item 3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#item4">Item 4</a>
</li>
</ul>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
I have the following css operating on my navbar elements
.nav-link:after {
content: "|";
font-weight:700;
color:#5E7B65;
padding-right: 10px;
padding-left: 5px;
}
running on the following html:
<ul class="navbar-nav ml-auto mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">aaa <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">bbb</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">ccc</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">ddd</a>
</li>
</ul>
How do i make it so it does not effect the last element
You can use the selector :not(:last-child) that applies the css to all elements except
the last one
.nav-link:not(:last-child):after {
content: "|";
font-weight:700;
color:#5E7B65;
padding-right: 10px;
padding-left: 5px;
}
.nav-link:not(:last-child):after
This is what you're looking for:
.nav-item:not(:last-child) .nav-link::after {
content: "|";
font-weight: 700;
color: #5E7B65;
padding-right: 10px;
padding-left: 5px;
}
<ul class="navbar-nav ml-auto mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">aaa <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">bbb</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">ccc</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">ddd</a>
</li>
</ul>
Because you need the last parent item of .nav-link, since your nav-item elements are wrapped in a container, you can use the :not pseudo selector to select all of the .nav-item elements except for the last one, and then style the child nav-link element.
I have the following html:
<ul class="pagination ">
<li class="">
<a href="/en/products/page5">
<span><i class="fa fa-chevron-left"></i></span>
</a>
</li>
<li class="">
1
</li>
<li class="">
2
</li>
<li class="">
3
</li>
<li class="">
4
</li>
<li class="">
5
</li>
<li class="active">
6
</li>
<li class="hide">
<a href="/en/products/page7">
<span><i class="fa fa-chevron-right"></i></span>
</a>
</li>
</ul>
In this example, I'm on the last page, so the 'next page' button is automatically hidden.
I want the last visible item (page 6) to have rounded borders.
How can I select 'page 6' with css/scss without changing the HTML?
I thought about something like this:
.pagination > li:not( + li.hide) > a,
.pagination > li:not( + li.hide) > span {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
But this doesn't work.
Just to be clear: I want to select the item before the .hide without depending on the .active class.
You can use the :nth-last-child() selector to start from the end of the list of items and select the second to last item you have. Here is how nth-last-child works.
.pagination > li {
border: 2px solid #000;
display: inline-block;
padding: 5px 10px;
margin: 5px;
}
.pagination > li.active:nth-last-child(2) {
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
}
.pagination > li.hide {
display: none;
}
<ul class="pagination ">
<li class="">
<a href="/en/products/page5">
<span><i class="fa fa-chevron-left"></i></span>
</a>
</li>
<li class="">
1
</li>
<li class="">
2
</li>
<li class="">
3
</li>
<li class="">
4
</li>
<li class="">
5
</li>
<li class="active">
6
</li>
<li class="hide">
<a href="/en/products/page7">
<span><i class="fa fa-chevron-right"></i></span>
</a>
</li>
</ul>
I don't think you can achieve this with css alone.
I know you haven't tagged your question with javascript or jquery, but here is a solution using CSS and jQuery that may help.
I've used color property instead of border for simplicity.
$('.hide').prev("li").find("a").addClass('border');
.border {
color: red;
}
.pagination > li:last-child:not(.hide) > a {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="pagination ">
<li class="">
<a href="/en/products/page5">
<span><i class="fa fa-chevron-left"></i></span>
</a>
</li>
<li class="">
1
</li>
<li class="">
2
</li>
<li class="">
3
</li>
<li class="">
4
</li>
<li class="">
5
</li>
<li class="active">
6
</li>
<li class="hide">
<a href="/en/products/page7">
<span><i class="fa fa-chevron-right"></i>arrow</span>
</a>
</li>
</ul>
<ul class="pagination ">
<li class="">
<a href="/en/products/page5">
<span><i class="fa fa-chevron-left"></i></span>
</a>
</li>
<li class="">
1
</li>
<li class="">
2
</li>
<li class="">
3
</li>
<li class="">
4
</li>
<li class="">
5
</li>
<li class="active">
6
</li>
</ul>
I am not able to keep my all ul/li list with logo and logged user name on the nav bar using materializecss? There are 6 navigations with a logo with a user name that I want to keep on the nav bar but, i am not able to keep all these on the nav bar. logo comes on the navigations text and user name come below of the nav bar. below are the some part of the html code.
<div class="navbar-fixed">
<nav>
<div class="nav-wrapper white black-text">
<img style="height: 56px;width: 70px;" src="<?php echo base_url(); ?>assets/images/Pratham-1.png">
<i class="material-icons menu">menu</i>
<ul class="right hide-on-med-and-down">
<!-- <li> <?php echo $name;?></li>
<li>Logout</li> -->
<li><a class="dropdown-button" href="#!" data-activates="basicinfo"><i class="material-icons left">language</i>Basic Information<i class="material-icons right">arrow_drop_down</i></a></li>
<li><a class="dropdown-button" href="#!" data-activates="learningresults"><i class="material-icons left">show_chart</i>Learning Results<i class="material-icons right">arrow_drop_down</i></a></li>
<li><a class="dropdown-button" href="#!" data-activates="attendance"><i class="material-icons left">supervisor_account</i>Attendance<i class="material-icons right">arrow_drop_down</i></a></li>
<li><a class="dropdown-button" href="#!" data-activates="monitoringinformation"><i class="material-icons left">search</i>Monitoring Information<i class="material-icons right">arrow_drop_down</i></a></li>
<li><a class="dropdown-button" href="#!" data-activates="others"><i class="material-icons left">speaker_notes</i>Others<i class="material-icons right">arrow_drop_down</i></a></li>
<li><i class="material-icons left">vertical_align_bottom</i>Download Data</li>
<li><a class="dropdown-button" href="#!" data-activates="dropdown1"><?php echo $name;?><i class="material-icons right">arrow_drop_down</i></a></li>
</ul>
<!-- Dropdown for Baisc Info large screen-->
<ul id="basicinfo" class="dropdown-content">
<li>Reach 2016-17</li>
<li class="divider"></li>
<li>What is Read? India</li>
<li>Tools & MME Formats</li>
<li>Implementation models</li>
<li>Archives</li>
</ul>
<!-- Dropdown for Learnign Levels large screen-->
<ul id="learningresults" class="dropdown-content">
<li>Camp-wise Results</li>
<li>Jumps Across Reading Levels</li>
<li>Know Your Progress</li>
<li>Comparison Reports</li>
<li>Goal Tracker</li>
</ul>
CSS - i have tried this so far I have tried this so far -
nav {
height: 120px;
line-height: 90px;
font-size: 12px;
}
nav i, nav [class^="mdi-"], nav [class*="mdi-"], nav i.material-icons {
/*height: 30px;
line-height: 30px;*/
}
nav .button-collapse i {
/* height: 30px;
line-height: 30px;*/
}
nav .brand-logo {
font-size: 1.6rem;
}
#media only screen and (min-width: 601px){
nav, nav .nav-wrapper i, nav a.button-collapse, nav a.button-collapse i {
/* height: 30px;
line-height: 30px;*/
}
}
nav a:hover {
color: blue;
/* text-decoration: underline;*/
}
I think this is more an issue with UI/UX design. I think this would look best on desktop as a side-nav that's fixed.
Here's an example from the Materialize Documentation without the need of changing the CSS:
<ul id="nav-mobile" class="side-nav fixed">
<li class="logo"><a id="logo-container" href="http://materializecss.com/" class="brand-logo">
<object id="front-page-logo" type="image/svg+xml" data="res/materialize.svg">Your browser does not support SVG</object></a></li>
<li class="search">
<div class="search-wrapper card">
<input id="search"><i class="material-icons">search</i>
<div class="search-results"></div>
</div>
</li>
<li class="bold">About</li>
<li class="bold">Getting Started</li>
<li class="no-padding">
<ul class="collapsible collapsible-accordion">
<li class="bold"><a class="collapsible-header waves-effect waves-teal">CSS</a>
<div class="collapsible-body">
<ul>
<li>Color</li>
<li>Grid</li>
<li>Helpers</li>
<li>Media</li>
<li>Sass</li>
<li>Shadow</li>
<li>Table</li>
<li>Typography</li>
</ul>
</div>
</li>
<li class="bold"><a class="collapsible-header active waves-effect waves-teal">Components</a>
<div class="collapsible-body">
<ul>
<li>Badges</li>
<li>Buttons</li>
<li>Breadcrumbs</li>
<li>Cards</li>
<li>Chips</li>
<li>Collections</li>
<li>Footer</li>
<li>Forms</li>
<li>Icons</li>
<li class="active">Navbar</li>
<li>Pagination</li>
<li>Preloader</li>
</ul>
</div>
</li>
<li class="bold"><a class="collapsible-header waves-effect waves-teal">JavaScript</a>
<div class="collapsible-body">
<ul>
<li>Carousel</li>
<li>Collapsible</li>
<li>Dialogs</li>
<li>Dropdown</li>
<li>Media</li>
<li>Modals</li>
<li>Parallax</li>
<li>Pushpin</li>
<li>ScrollFire</li>
<li>Scrollspy</li>
<li>SideNav</li>
<li>Tabs</li>
<li>Transitions</li>
<li>Waves</li>
</ul>
</div>
</li>
</ul>
Frustratingly not been able to resolve the CSS3 pseudo element 'last-child' that isn't working with this custom drop down navigation menu that we're working on currently.
Each drop down menu can be assigned a number of columns, in this instance, I am wanting to apply a right hand border to each column (.col_1) within the div .dropdown_3column.
CSS Snippet
.dropdown_1column_simple {width: 100px;}
.dropdown_2column_simple {width: 155px;}
.dropdown_1column {width: 550px;}
.dropdown_2column {width: 650px;}
.dropdown_3column {width: 500px;}
.dropdown_4column {width: 800px;}
.dropdown_5column {width: 1000px;}
.dropdown_2column_simple .col_1 {width:155px;}
.dropdown_2column_simple .col_2 {width:155px;}
.col_1 {width:145px; border-right: 1px solid #888;}
.col_2 {width:240px;}
.col_3 {width:490px;}
.col_4 {width:440px;}
.col_5 {width:575px;}
.col_s {width:250px;}
.col_1,.col_2,.col_3,.col_4,.col_5 {
display:inline;
float: left;
position: relative;
margin-left: 5px;
margin-right: 5px;
/*border: 1px solid #000;*/
}
HTML Snippet
<div class="dropdown_3column align_left ">
<div class="col_3">
<div class="content_top"></div>
</div>
<div class="col_1">
<ul>
<li class="level1">
<a href="http://009rep.clubnetdev.com/brands/addict-clothing.html">
<span class="level1">Addict Clothing </span>
</a>
</li>
<li class="level1">
<a href="http://009rep.clubnetdev.com/brands/atticus-clothing.html">
<span class="level1">Atticus Clothing</span>
</a>
</li>
<li class="level1">
<a href="http://009rep.clubnetdev.com/brands/dephect-clothing.html">
<span class="level1">Dephect Clothing</span>
</a>
</li>
<li class="level1">
<a href="http://009rep.clubnetdev.com/brands/dickies-clothing.html">
<span class="level1">Dickies</span>
</a>
</li>
<li class="level1">
<a href="http://009rep.clubnetdev.com/brands/dta-clothing.html">
<span class="level1">DTA Clothing</span>
</a>
</li>
<li class="level1">
<a href="http://009rep.clubnetdev.com/brands/famous-stars-and-straps-clothing.html">
<span class="level1">Famous Stars And Straps Clothing</span>
</a>
</li>
<li class="level1">
<a href="http://009rep.clubnetdev.com/brands/fuct-clothing.html">
<span class="level1">FUCT Clothing</span>
</a>
</li>
<li class="level1">
<a href="http://009rep.clubnetdev.com/brands/hex-accessories.html">
<span class="level1">HEX Accessories</span>
</a>
</li>
</ul>
</div>
<div class="col_1">
<ul>
<li class="level1">
<a href="http://009rep.clubnetdev.com/brands/the-hundreds.html">
<span class="level1">The Hundreds</span>
</a>
</li>
<li class="level1">
<a href="http://009rep.clubnetdev.com/brands/insight-clothing.html">
<span class="level1">Insight Clothing</span>
</a>
</li>
<li class="level1">
<a href="http://009rep.clubnetdev.com/brands/jeepney-clothing.html">
<span class="level1">Jeepney Clothing</span>
</a>
</li>
<li class="level1">
<a href="http://009rep.clubnetdev.com/brands/king-apparel.html">
<span class="level1">King Apparel</span>
</a>
</li>
<li class="level1">
<a href="http://009rep.clubnetdev.com/brands/lrg-clothing.html">
<span class="level1">LRG Clothing</span>
</a>
</li>
<li class="level1">
<a href="http://009rep.clubnetdev.com/brands/my-yard-clothing.html">
<span class="level1">My Yard</span>
</a>
</li>
<li class="level1">
<a href="http://009rep.clubnetdev.com/brands/new-era-5950.html">
<span class="level1">New Era 5950 Hats and Apparel</span>
</a>
</li>
<li class="level1">
<a href="http://009rep.clubnetdev.com/brands/pxl-clothing.html">
<span class="level1">PXL Clothing</span>
</a>
</li>
</ul>
</div>
<div class="col_1">
<ul>
<li class="level1">
<a href="http://009rep.clubnetdev.com/brands/rebel8-clothing.html">
<span class="level1">REBEL8 Clothing</span>
</a>
</li>
<li class="level1">
<a href="http://009rep.clubnetdev.com/brands/ringspun-clothing.html">
<span class="level1">Ringspun</span>
</a>
</li>
<li class="level1">
<a href="http://009rep.clubnetdev.com/brands/rogue-status-clothing.html">
<span class="level1">Rogue Status </span>
</a>
</li>
<li class="level1">
<a href="http://009rep.clubnetdev.com/brands/the-wild-ones-clothing.html">
<span class="level1">The Wild Ones</span>
</a>
</li>
<li class="level1">
<a href="http://009rep.clubnetdev.com/brands/volcom-clothing.html">
<span class="level1">Volcom Clothing</span>
</a>
</li>
<li class="level1">
<a href="http://009rep.clubnetdev.com/brands/zoo-york-clothing.html">
<span class="level1">Zoo York Clothing</span>
</a>
</li>
</ul>
</div>
<div class="col_3">
<div class="content_bottom"></div>
</div>
<div class="col_s">
<div class="content_side"></div>
</div>
</div>
A live version of the problem can be seen here. It is the 'Brands' dropdown in question that I am trying to remove the right hand border from the 3rd (last) column.
I'm aware of browser incompatibilities and other alternatives using JS / jQuery that exist perhaps but I'm only interested in trying to resolve this with the CSS.
I'm thinking perhaps this needs a fresh pair of eyes because I've tried tons of variations and not managed to select the last column within that drop down I believe.
Thanks in advance.
EDIT: I have attempted tons of variations but I think the issue is my inability to work out the last child of the parent item which doesn't count other divs too. I've been trying with the likes of:
div:last-child .col_1 {border-right: none !important;}
Thanks.
EDIT 2: Please find instance of my issue on JS Fiddle too if it helps anyone.
Thanks.
You are not using selectors right.
Here is a fix using nth-child:
http://jsfiddle.net/BUhgZ/3/