I'm trying to achieve a 6 column fluid layout, like so:
<ul class="list">
<li class="list-element first">
<a>Item 1</a>
</li>
<li class="list-element">
<a>Item 2</a>
</li>
<li class="list-element">
<a>Item 3</a>
</li>
<li class="list-element">
<a>Item 4</a>
</li>
<li class="list-element">
<a>Item 5</a>
</li>
<li class="list-element last">
<a>Item 6</a>
</li>
</ul>
My list should be 100% width and every list element LINK (ul li a) should fit equally into it. Did some research and didn't find any 6 column fluid layout to match my request (or I'm just too tired to see it).
Any oppinion?
TIA
Use the css float on the li and a width of 16.66666666666667% this means 100/6.
here is a sample css. and a fiddle
.list {
list-style: none;
margin: 0;
padding: 0;
}
.list li {
width: 16.66666666666667%;
float: left;
}
.list li a {
display: block;
border: 1px solid #ddd;
text-align: center;
}
<ul class="list">
<li class="list-element first">
<a>Item 1</a>
</li>
<li class="list-element">
<a>Item 2</a>
</li>
<li class="list-element">
<a>Item 3</a>
</li>
<li class="list-element">
<a>Item 4</a>
</li>
<li class="list-element">
<a>Item 5</a>
</li>
<li class="list-element last">
<a>Item 6</a>
</li>
</ul>
Related
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 made a dropdown-menu. As you can see it is scrollable because of the overflow-x:hidden.
In IE9 it works as expected. But when I try it in Chrome, you can scroll till the bottom, and if you scroll a few times more to the bottom, the list will hang for a second and scrolls only then to the top.
<div class="btn-group" style="width:100%">
<ul class="dropdown-menu"
style="display: inherit; max-height: 200px;width:100%;overflow-x:hidden;">
<li>
<a>Item 1</a>
</li>
<li>
<a>Item 2</a>
</li>
<li>
<a>Item 3</a>
</li>
<li>
<a>Item 4</a>
</li>
<li>
<a>Item 5</a>
</li>
<li>
<a>Item 6</a>
</li>
<li>
<a>Item 7</a>
</li>
<li>
<a>Item 8</a>
</li>
<li>
<a>Item 9</a>
</li>
</ul>
</div>
http://plnkr.co/edit/vwCIau4STpJjWkVJxcar
This bug is confirmed and assigned in Chrome. Thereby closing this question.
https://bugs.chromium.org/p/chromium/issues/detail?id=828751
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>
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>
<ul class="nav">
<li class="dropdown opener">Moodle community
<ul class="dropdown-menu dropotron level-0 left">
<li><a title="Moodle free support" href="https://moodle.org/support">Moodle free support</a></li>
<li class="divider"> </li>
<li class="dropdown-submenu">Moodl
<ul class="dropdown-menu dropotron level-0 left">
<li><a title="Moodle Docs" href="http://docs.moodle.org">Moodle Docs</a></li>
</ul>
</li>
</ul>
</li>
<li class="divider"> </li>
<li><a title="Moodle.com" href="http://moodle.com/">Moodle.com</a></li>
<li class="dropdown opener langmenu">English (en)
<ul class="dropdown-menu dropotron level-0 left">
<li><a title="English (en)" href="http://192.168.1.123/moodle30nw/?redirect=0&lang=en">English (en)</a></li>
<li><a title="عربي (ar)" href="http://192.168.1.123/moodle30nw/?redirect=0&lang=ar">عربي (ar)</a></li>
</ul>
</li>
</ul>
.navbar .nav > li:nth-of-type(2) a:hover{
background-color: #407a61 !important;
color:#fff !important;
}
Why my css is not working here i would like to change the hover background-color of the second element how can i apply it. Is any other way to do it.
Check Here Your Answer
You have to remove > operator from the CSS
Here is the Demo
HTML
<div class="navbar ">
<div class="nav">
<ul>
<li>First One</li>
<li>Second One</li>
<li>Three One</li>
<li>Four One</li>
</ul>
</div>
</div>
CSS
.navbar .nav li:nth-of-type(2):hover {
color:red;
}