This question already has an answer here:
Why doesn't nth-of-type/nth-child work on nested elements?
(1 answer)
Closed 3 years ago.
I've been trying to remove the last tab's border-right property... but both the nth-child property or the last-child property isn't working...
plus when i use nth-child(1) it selects all the children and doesn't work for other values
<!-- HTML Markup -->
<ul>
<a href="#">
<li>Solutions</li>
</a>
<a href="#">
<li>Industries</li>
</a>
<a href="#">
<li>Resources</li>
</a>
<a href="#">
<li>Partners</li>
</a>
<a href="#">
<li>About</li>
</a>
<a href="#" class="button">
<li>Enterprise</li>
</a>
</ul>
/* CSS Code */
ul:after{
content: "";
display: block;
clear: both;
}
li {
float: left;
padding: 10px 15px;
/* border-right: 1px solid #a5a5a5; */
color: #1F222B;
}
li {
border-right: 1px solid #ff0000;
}
li:nth-of-type(1) {
border-right: 1px solid #00b2ff;
}
li:hover {
border-right: 1px solid #F3EFF2;
background: #1F222B;
color: #F3EFF2;
}
Kindly help with the solution and the cause?
And is it possible to achieve the solution with 'li' tags inside the 'a' tag
but with the floating 'li' tags?
You can add this CSS to remove the border from the last tab
a:last-child li {
border-right: none;
}
Related
hello i have this in vuejs
<ul class="new-list">
<div v-for="cat in catss">
<div>
<a :href="link(cat)">
<li class="single-new">
<p class="title">{{cat.title}}</p>
</li>
</a>
</div>
</div>
</ul>
and i have this style
.single-new {
text-align:center;
width:100%;
border-bottom: 1px dotted black;
}
.single-new:last-child {
border:none;
}
but .sing-new:last-child overrid all items and remove border of all
how can i fix this
:last-child always confused, MDN explains it
The :last-child CSS pseudo-class represents the last element among a group of sibling elements.
In your example, what you want is the border of the last item in the list is none.
So, you should do this
.new-list > div:last-child .single-new {
border: none;
}
Every li you have is a last-child of an a tag.
try i like this
<ul class="new-list">
<div v-for="cat in catss" class="single-new">
<div>
<a :href="link(cat)">
<li>
<p class="title">{{cat.title}}</p>
</li>
</a>
</div>
</div>
</ul>
.single-new li {
text-align:center;
width:100%;
border-bottom: 1px dotted black;
}
.single-new:last-child li {
border:none;
}
You should remove all the div, a before the li. directly under an ul are supposed to be li.
You also should not put p (block) inside an a (inline). Use span instead.
Here is a link about the inline/block nature of html elements: Link
I guessed this is what you want
<ul class="new-list">
<div v-for="cat in catss" class="cat">
<div>
<a :href="link(cat)">
<li class="single-new">
<p class="title">{{cat.title}}</p>
</li>
</a>
</div>
</div>
</ul>
CSS
.cat {
.single-new {
text-align:center;
width:100%;
border-bottom: 1px dotted black;
}
}
.cat:last-child {
.single-new {
border:none;
}
}
This question already has answers here:
Padding for anchor tag
(3 answers)
Padding-top not working
(1 answer)
Closed 3 years ago.
Take This code for example
.ul {
list-style-type: none;
}
.li {
display: inline-block;
border: black solid 1px;
margin-left: 20px;
}
.btn {
padding: 20px;
text-transform: uppercase;
}
<ul class="ul">
<li class="li">
<button class="btn">
Button Here
</button>
</li>
<li class="li">
<a class="btn" href="#">
Link Here
</a>
</li>
</ul>
I want apply padding on <a> but it is not working
I know i can apply padding on <li> but it will not work because when i apply padding the whole thing is not click able only the <a> part is
You can add an inline-block on the class "btn" so you can have margins and paddings added on the four sides.
Different from the inline elements that you can't add vertical paddings.
.btn {
padding: 20px !important;
text-transform: uppercase;
display: inline-block;
}
Below is my code:
#sam_ul li {
height: 41px;
border-bottom: 1pt solid #DEDEDE;
background-color: #F8F8F8;
}
#sam_ul li {
list-style-type: none;
}
#u_l_add:before {
content: '\0FBF';
}
<ul id="sam_ul" style="margin:0px;">
<li>
<a href="#">
<span id="u_l_add" style="font-size:36px;line-height:20px;"></span>
<div style="width:130px;position:relative;top:-20px;left:40px;">Add</div>
</a>
</li>
<li>
<a href="#">
<span id="u_l_sear" style="font-size:36px;line-height:20px;"></span>
<div style="width:130px;position:relative;top:-20px;left:40px;">Search Artifact</div>
</a>
</li>
</ul>
The content pseudo element is displayed differently in both IE and mozilla. By different I mean in IE it is displaying correctly while in mozilla it is adding some extra padding and displaying the content.
check the difference between the first li element and the second li element.
Can anyone help me with this?
Add padding:0 to unordered list
#sam_ul{
padding:0
}
#sam_ul li {
height: 41px;
border-bottom: 1pt solid #DEDEDE;
background-color: #F8F8F8;
list-style-type: none;
}
#u_l_add:before {
content: '\0FBF'; }
#u_l_sear:before {
content: '\0FBF'; }
<body>
<ul id="sam_ul" style="margin:0px;">
<li>
<a href="#">
<span id="u_l_add" style="font-size:36px;line-height:20px;"></span>
<div style="width:130px;position:relative;top:-20px;left:40px;">Add</div>
</a>
</li>
<li>
<a href="#">
<span id="u_l_sear" style="font-size:36px;line-height:20px;"></span>
<div style="width:130px;position:relative;top:-20px;left:40px;">Search Artifact</div>
</a>
</li>
</ul>
</body>
Try to normalize everything. HTML and body has default margin and padding for every browser that could ruin your design. Almost all block elements has that.
Try:
html,body{
margin: 0;
padding:0;
}
Or download and add normalize.css
This question already has answers here:
CSS selector for first element with class
(23 answers)
Closed 8 years ago.
CSS
.list-group-item:first-child{
border-top: none !important;
}
HTML
<li class="list-group-item" ng-repeat="user in data">
{{user.name}}
</li>
What's wrong with my first-child?
demo here http://plnkr.co/edit/FKXdsJRc9eu4TiN9UPMY?p=preview
The :first-child selector is intended, to select the first child of a parent tag. The children have to be embedded in the same parent tag, it is not to be used with css class.
If you want to select first list item, you chould modify it to select first child of <ul> tag.
li:first-child{
border-top: none !important;
}
You could change it in two ways:
A) Use it on the li (as now) but use first-of-type
B) Nest the li's in an ul class="example" (which you are supposed to do) and do
.example:first-child{
border-top: none !important;
}
(Your example edited: http://plnkr.co/edit/QTlaDQPXfdg3W6oNYex4?p=preview)
Embed the list in <ul></ul> tags, as they are expected to, and it will work.
Remove !important from list-group-item class border-top
CSS:
.list-group-item {
padding: 6px 15px !important;
border-top: 2px solid #DDD;
padding-top: 15px !important;
}
HTML:
something here
<ul>
<li class="list-group-item ng-scope ng-binding" ng-repeat="user in data">jason</li>
<li class="list-group-item ng-scope ng-binding" ng-repeat="user in data">james</li>
<li class="list-group-item ng-scope ng-binding" ng-repeat="user in data">josh</li>
<li class="list-group-item ng-scope ng-binding" ng-repeat="user in data">joshua</li>
</ul>
LINK
You can try below code:
http://plnkr.co/edit/jqecyBMcrLfVaGtxhIaM?p=preview
<ul><li class="list-group-item" ng-repeat="user in data">
{{user.name}}
</li></ul>
You don't have any parent tag there. You should use something like this:
HTML
<ul class="list-group-item">
<li ng-repeat="user in data">
{{user.name}}
</li>
</ul>
CSS
.list-group-item li {
padding: 6px 15px !important;
border-top: 2px solid #DDD !important;
padding-top: 15px !important;
}
.list-group-item li:first-child {
border-top: none !important;
}
<ul class="First">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
If you have this kind of structure you can access the first child by giving style like this :
.First li:first-child {
/your style comes here/
}
I have tried to solve the answer in different way, Not Sure why first:child is not working
.list-group-item {
padding: 6px 15px;
border-bottom: 2px solid #DDD;
padding-top: 15px;
}
.list-group-item:last-child{
border-bottom: 2px solid #FFFFFF;
}
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
“text-decoration” and the “:after” pseudo-element
“text-decoration” and the “:after” pseudo-element, revisited
I am making a navigation links using <a> tags Following is the html
<div class="nav_container">
<a class="panel" href="demolink">menu1</a>
<a class="panel" href="demolink">menu2</a>
<a class="panel" href="demolink">menu3</a>
</div>
And applying the :after css property to put a pipeline for the divider
.panel:after{
content:"|";
margin-left: 4px;
margin-right: 4px;
}
.panel:last-child:after{
content:"";
}
I want to put underline when the menu is selected for that I am applying a class called selected
.panel.selected {
text-decoratoion:underline;
}
But the problem is The pipline after menu "|" is also having the underline and I want to remove it. I even tried to change the css for .panle:after as follows,
.panel:after{
content:"|";
margin-left: 4px;
margin-right: 4px;
text-decoration:none;
}
But still the underline is there.
Any suggestion,
Thank you.
Try this one:
.panel:after {
display:inline-block;
}
Or use the following:
.panel {
display: inline-block;
vertical-align: top;
position: relative;
color: black;
font-size: 14px;
font-weight: bold;
margin: 0 5px;
}
.panel:after {
content: '';
border-left: solid 2px red;
left: -10px;
top: 2px;
height: 10px;
position: absolute;
}
.panel:first-child:after {
display: none;
}
.panel:hover {
text-decoration: none;
}
<div class="nav_container">
<a class="panel" href="demolink">menu1</a>
<a class="panel" href="demolink">menu2</a>
<a class="panel" href="demolink">menu3</a>
</div>
you can use one another method also for your question :- demo
I have tried with minimized code :-
HTML
<div class="nav_container">
menu1
menu2
menu3
</div>
CSS
.nav_container a {
color:red;
display:inline-block;
}
.nav_container a + a{
color:red;
border-left:1px solid red;
padding-left:7px;
line-height:12px;
}
I don't exactly know what your .panel.selected {} part does. However you can make the link underlined when it is focused by using this.
.panel:focus {text-decoration:underline;}
And you can remove the underline from links and pipes(|) like this.
.panel:link {text-decoration:none;}
Add above two in to your page and check.
A simple menu for your requirement.
HTML:
<div class="menu">
<ul>
<li class="last-menu">menu1</li>
<li class="last-menu">menu2</li>
<li>menu3</li>
</ul>
</div>
CSS:
.menu{
width:100%;
}
.menu ul{
list-style:none;
}
.menu li{
float:left;
}
.last-menu{
border-right:1px solid #000;
}