Safari is showing my :after pseudo-element as if is a :before
Chrome is showing it correctly, but Safari is not.
It is supposed to put a forward slash after every link on the navigation except the last one, but Safari is putting them before each one.
The css:
#site-header nav#main-nav #menu li:not(:last-child):after {
content: "/";
position: absolute;
margin-right: 7px;
line-height: 1;
bottom: 15px;
}
You CSS is overly complex. You just need to add the slash after before sibling of the original li. You don't need to use absolute positioning, and the :not pseudo class:
#menu li + li::before {
content: "/";
}
See this fiddle: http://jsfiddle.net/S93gy/
As an aside, you have incredibly specific selectors with multiple IDs and element selectors. This will make them very difficult to override if you ever need to. As an ID is unique, you in most cases just need to use that ID selector, rather than a long string before it such as #menu instead of #site-header nav#main-nav #menu
Related
This is likely something I am just stupidly overlooking, but would you please tell me why hovering over the second division element doesn't cause the background color of the first letter to change to rgb(50,50,50) from rgb(150,150,150)?
Hovering over the first division, which starts out with no styling on the first letter, reacts to the style changes upon hover. But the second division, which starts out with the same styles that the first displays upon hover, does not change to the darker background upon hover.
I'm using the latest version of Firefox developer edition. I see now that it works in Chrome; so must be a Firefox issue.
Thank you.
div > p:before { content: 'This text.'; }
div:nth-child(2) > p::first-letter,
div:first-child:hover > p::first-letter
{
float: left;
padding: 0.5rem;
background-color: rgb(150,150,150);
}
div:nth-child(2):hover > p::first-letter
{
background-color: rgb(50,50,50);
}
<div><p></p></div>
<div><p></p></div>
This snippet works in Firefox. It seems that to get the ::first-letter to be styled both without and with :hover a letter has to be there apart from the content added by :before or :after.
div > p:after { content: 'his text.' }
div > p::first-letter
{
float: left;
padding: 0.5rem;
background-color: rgb(150,150,150);
}
div:hover > p::first-letter
{
background-color: rgb(70,70,70);
color: white;
}
<div><p>T</p></div>
I applied #Sydney Y's solution to the above snippet just to show that it works in Firefox. I don't think it is an isue of the :hover not being recognized because the snippet above recognizes it. It appears to be an issue of not including the text added through :before { content: ... } such that there is a first letter to which to apply the style. But adding no content on :hover using :after seems to alter that and works for variable content.
I realize that this of little interest to anyone who doesn't want to use drop caps and change their style based on hover.
div > p:before { content: 'This text.' }
div > p::first-letter
{
float: left;
padding: 0.5rem;
background-color: rgb(150,150,150);
}
div:hover > p::first-letter
{
background-color: rgb(70,70,70);
color: white;
}
div:hover > p:after { content: ''; }
<div><p></p></div>
Yep, just some mix-ups, your accessors are correct. Each block of CSS needs to apply to both divs:
div > p:before { content: 'This text.'; }
div> p::first-letter {
padding: 0.5rem;
background: red;
}
div:hover> p::first-letter{
background: black;
}
div:hover > p:after { content: ''; }
Thanks for the snippet, that's cool!
Edit: getting closer! Code is updated. Still attempting on Firefox.
Edit: Solved, kind of. It works, but it's kind of a hack. The
issue: In Firefox the hover doesn't trigger a repaint in this specific
instance, so I added an empty bit of content on hover because the
:after or content seem to have a kind of a hook. You may be able to
achieve the same thing with a different hack other than content.
But good news is: this works in both Chrome and Firefox.
Awesome problem. I can't imagine ever coming across this issue again, but it was super interesting to troubleshoot.
There is a bug in firefox that nth-child() is not going to work on syntax that's why it is not working. Anyway if not want the same functionality as first one with different color this can be done with you just need to put hover in front of this code
"div:nth-child(2) > p::first-letter,div:first-child:hover > p::first-letter ". I hope this will help. https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child
I have an issue with applying :last-of-type and :before.
I have the following:
.stepwizard-row:before {
position: absolute;
top: 0px;
content: " ";
width: 1px;
height: 100%;
background-color: #97D3FD;
}
.stepwizard-row:before:last-of-type {
position: absolute;
top: 0px;
content: " ";
}
However, the :before:last-of-type doesn't seem to have any effect.
What am I doing wrong?
You have a wrong order, it should be:
.stepwizard-row:last-of-type:before {}
CSS3 Selectors - 7. Pseudo-elements
Only one pseudo-element may appear per selector, and if present it must appear after the sequence of simple selectors that represents the subjects of the selector. Note: A future version of this specification may allow multiple pseudo-elements per selector.
By the way, you may get unexpected behavior by using .class:last-of-type, it really should work with elements, e.g. .parent > div:last-of-type.
6.6.5.9. :last-of-type pseudo-class
Same as :nth-last-of-type(1). The :last-of-type pseudo-class represents an element that is the last sibling of its type in the list of children of its parent element.
To seperate the links in navigation I have set the following
#menu-main li a:after{
content: " * ";
}
The current item gets additional
text-decoration: underline;
my problem now is, that the " * " is also underlined, but shouldn't
I have tried to add
#menu-main li a:after{
text-decoration: none !important;
}
but it has no effect
Does anyone have an idea how to keep the text underlined but not the :after content?
In normal flow, the pseudo element expands the dimensions of the element, and what you see is the underline of the underline of the link itself. Add a:after {text-decoration: line-through;} to verify.
Here's a proposed solution: http://jsfiddle.net/Ronny/Smr38/
Basically, when using position: absolute for the pseudo-elements they no longer affect the dimensions of their parent elements, so the underlines are cut at the right place. You still need to take care of things like pointer events, hover state and focus rings, but I left at least the latter for you to figure out.
if you're in control of markup, you could insert a span in your link
<span>your link</span>
and use this css
a { text-decoration: none }
a span { text-decoration: underline }
doing so, the content injected into the :after pseudoelement won't be underlined
otherwise, you may apply the style to li:after (if it is possibile) like so
#menu-main li:after{
content: " * ";
}
It's an old question, but it's what you find using Google so I thought I'd share my solution when you need the pseudo-element to contribute to the size of the "parent" and absolute positioning is not an option for some reason:
#menu-main li a:after{
content: " * ";
display:inline-block; /* So we can set a width */
width: 0;
margin-left: 10px; /* "Size" of the Pseudo-element */
}
Since the width is 0, it does not display a text-decoration.
This also involves less code and less dependencies among your styles compared to the accepted answer.
In my case i don't even need the width, it just works adding inline-block.
the first child should dsiplay the image icon home and the last child should not display the background image:
heres the fiddle: http://jsfiddle.net/gUqC2/
but no image is displayed in the first child and the image is not removed on the last child
You seem to be confused about classes and pseudo-selectors, the pseudo-selector :first-child is not equivalent to .first (a class-name). Similarly, :last-child is not equivalent to .last (again, a class-name).
Use:
.bodyheader ul li:first-child a:hover { background-position: 0 -16px; }
.bodyheader ul li:last-child { background: none; margin-right: 0; padding-right: 0; }
Updated JS Fiddle
References:
Pseudo-classes at the W3.org's CSS Selectors page.
use :first-child and :last-child instead of .first and .last
.whatever refers to element with class="whatever", while :first-child and :last-child are pseudo selectors, as you have used :hover with links
I'm working on the css / html for this ipad page.
Here's my code:
http://jsfiddle.net/KaWpZ/1/
What CSS do i need to use to get dashes? and why can't I make them align properly on so that the text on the second line (like Sport, eco, normal etc) sits padded and not underneath the dash.
Thanks
With an iPad you've got access to the :before pseudo-element, allowing you to use:
ul li{
padding-left: 1em;
position: relative;
}
ul li:before {
content: '-';
position: absolute;
left: 0;
}
JS Fiddle demo