I have this CSS
.pages a {
text-decoration: none;
color: #1e1e1e;
font-weight: bold;
display: inline;
padding-left: 8px;
}
.pages a:after {
content: "|";
padding-left: 8px;
}
I want the content in a:after have the | after the last "a". How would I do that? I tried using :last-of-type, but it didn't work.
It currently looks like this
1 | 2 | 3 |
You may try this
/*Other style goes here*/
.pages a:last-child:after {
content: "";
}
DEMO.
Try using this
.pages a:after {
padding-left: 8px;
}
.pages a:not(:last-child):after {
content: '|';
}
Fiddle
This will add the padding to all of the .pages a, and it will add the | for any a that isn't the last child of .pages
Here's what you want, I guess:
http://jsfiddle.net/VVv7f/
.pages a {
text-decoration: none;
color: #1e1e1e;
font-weight: bold;
display: inline;
padding-left: 8px;
}
.pages a:after {
content: "|";
padding-left: 8px;
}
.pages a:last-child:after {
content: ""; /* this line overwrites your "|" with empty "" */
}
What about this, last-of-type will work
.pages a:last-of-type:after{
content: '';
}
Related
I am typing this code and I need to stop it at 29 while my all childs are like 100-150:
&:nth-child(1n+1)
Is there any trick to make this work?
You're looking for this function notation. Cheers
body {
counter-reset: section;
}
div {
display: inline-block;
padding: .5rem;
border: gray 1px dotted;
text-align: center;
color: #f00;
margin: .25rem;
}
div:before {
counter-increment: section;
content: counter(section);
}
div:nth-child(-n+29) {
background-color: #00f;
}
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
In an ordered list, I'm asked to display numbers in a different color as the list item, as well as adding a dot next to the number.
I managed to achieve this, but when the number becomes a 2-digits one (from 10 onwards), the dot isn't properly located.
Any idea how to fix that?
CSS:
ol {
list-style: none;
counter-reset: item;
li {
position: relative;
&::before {
content: counter(item);
counter-increment: item;
color: green;
display: inline-block;
width: 1em;
font-weight: bold;
margin-right: 0.5rem;
}
&::after {
position: absolute;
content: '.';
left: 12px;
color: green;
font-weight: bold;
}
}
}
Here's my code in a pen.
There is no need to use the after pseudoelement: change the ::before like this, by adding the dot at the end of the content
ol {
list-style: none;
counter-reset: item;
li {
position: relative;
&::before {
content: counter(item) ".";
counter-increment: item;
color: green;
display: inline-block;
width: 1em;
font-weight: bold;
margin-right: 0.5rem;
}
}
}
In this way the position of the dot will always follow the number, no matter how many digits you have.
Codepen fork
I'm creating a rating control made of half stars and I want to be able to select odd and even labels inside the .rating control. The selector shoudl look like this but it's not working here is my codepen check my html out while your there
.rating {
label:nth-child(odd)::before {} // not working
}
.rating {
label:nth-child(even)::before {} // not working
}
Full CSS:
#import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css);
html, body {
margin: 0;
height: 100%;
min-height: 100%;
}
body {
background: #272727;
}
.rating {
position: absolute;
display: inline-block;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
label {
font-size: 24px;
font-family: FontAwesome;
color: #afa302;
}
label.half_l::before {
content: '\f006';
display: inline-block;
width: 11px;
overflow: hidden;
}
label.half_r {
width: 12px;
position: relative;
overflow: hidden;
display: inline-block;
margin-right: 3px;
}
label.half_r::before {
content: '\f006';
display: inline-block;
left: -11px;
position: relative;
}
label {
float: right;
}
label:hover {
color: #fff239;
}
> input {
display: none;
}
label.half_l:hover:before,
label.half_l:hover ~ label.half_l:before {
content: '\f089';
color: #fff239;
}
label.half_l:hover ~ label.half_r::before {
content: '\f005';
color: #fff239;
}
label.half_r:hover:before {
content: '\f005';
color: #fff239;
}
label.half_r:hover ~ label.half_r::before,
label.half_r:hover ~ label.half_l:before {
content: '\f005';
color: #fff239;
}
input[type=radio]:checked ~ label.half_l:before,
input[type=radio]:checked ~ label.half_r:before{
content: '\f005';
}
}
Use nth-of-type instead of nth-child
label:nth-of-type(odd) {
background-color:red;
}
nth-child looks for all children, regardless their type, where nth-of-type looks for a certain type
If to use the nth-child selector you need to bypass the input's since it count all children no matter their type
The nth-child(4n+4) start from the 4:th element (your second label) and then counts to every 4:th and apply the rule, which in your case will be every even label
The nth-child(4n+2) start from the 2:nd element (your first label) and then counts to every 4:th and apply the rule, which in your case will be every odd label.
Note, one can also use nth-child(4n) instead of nth-child(4n+4), which will start from the 0:th element (which does not exists) and then counts to every 4:th.
.rating {
label:nth-child(4n+4)::before {
background: yellow;
}
}
.rating {
label:nth-child(4n+2)::before {
background: blue;
}
}
Updated codepen
I have this code:
<style>
.caps {
text-transform: capitalize
}
.stuffBefore:before {
content: 'a';
}
</style>
<div class="caps"><span class="stuffBefore"></span>
<span>stuff after</span></div>
What I'm basically trying to achieve is to show
aStuff After
but what i actually get is
Astuff After
I can't add a space between "a" and "stuff" (get this as an example of the problem, the real problem is a little more complex) but i thought the "span" tag would act as a separator, like the whitespace.
Can I achieve it by adding further CSS?
Here is one way :
JsFiddle : https://jsfiddle.net/8vzmv06p/
.caps {
text-transform: capitalize;
position:relative;
}
.caps > span{
float:left;
}
.stuffBefore:before {
content: 'a';
text-transform: none;
}
<div class="caps"><span class="stuffBefore"></span>
<span>stuff after</span></div>
.caps > span{
float:left;
}
.stuffBefore:before {
content: 'a';
}
.stuffBefore + span {
text-transform: capitalize;
}
<div class="caps"><span class="stuffBefore"></span><span>stuff after</span></div>
You can try this
.caps {
text-transform: capitalize
}
.stuffBefore:before {
content: 'a';
float: left;
text-transform: none;
}
<div class="caps"><span class="stuffBefore"></span>
<span>stuff after</span></div>
You need the .stuffBefore span? If not necessary you can simplify your code:
.caps span {
text-transform: capitalize;
}
.caps span:before {
content: 'a';
text-transform: none;
float:left;
}
<div class="caps">
<span>stuff after</span>
</div>
Even without span:
.caps {
text-transform: capitalize;
}
.caps:before {
content: 'a';
text-transform: none;
float:left;
}
<div class="caps">
stuff after
</div>
how can i set a different color for brackets around the incrementor in an ordered list. Or how can set another color just for the incrementor?
for details please visit jsfidlle link. https://jsfiddle.net/bnk2saqe/
ol { list-style: none; padding-left: 2em; text-indent: -2em;}
.simple-footnotes-list li::first-letter {
color: blue;
}
ol .simple-footnotes-list li::nth-child(3) {
color: blue;
}
.simple-footnotes-list li:before {
content: "[" counter(section, decimal) "]";
color:#FF4500;
font-weight: bold;
}
li { counter-increment: section;}
This works:
.simple-footnotes-list li:before {
content: "[" counter(section, decimal) "]";
font-weight: bold;
}
.simple-footnotes-list li:nth-child(1):before {
color:#FF4500;
}
.simple-footnotes-list li:nth-child(2):before {
color:#45FF00;
}
You could also use nth-child(xn) for cycling colors.
Fiddle