I have found a really nice css code that will show links as highlighted text. Now I would like to have this style applied only on posts on my website so after adding the css style I needed to exclude other elements that will not fit into my post requirement so I ended up with this:
.entry-content p a:not(.et_pb_more_button):not(.et-pb-arrow-prev):not(.et-pb-arrow-next):not(.jp-relatedposts-post-title):not(.jp-relatedposts-post-a):not(#footnote_reference_container_collapse_button){
text-decoration:none;
border-bottom: 2px solid #bdef7a;
box-shadow: inset 0 -4px 0 #bdef7a;
color: inherit;
transition: background 0.1s cubic-bezier(.33,.66,.66,1);
}
.entry-content p a:hover:not(.et_pb_more_button):not(.et-pb-arrow-prev):not(.et-pb-arrow-next):not(.jp-relatedposts-post-title):not(.jp-relatedposts-post-a):not(#footnote_reference_container_collapse_button){
background: #bdef7a;
}
Besides the ugliness of the code, I still don't get the expected result inside a div containing a ul list even if it's inside the .entry-content class.
Now my question would be: What is the best approach in achieving the expected result and why does one link not show a style?
If you want the selector to apply to all links, not only those inside of a <p> element, change the selector from:
.entry-content p a:not(
to
.entry-content a:not(
Related
I have a little css code to add an underline to the H2 headings in my blog posts:
.post h2:after {
content:'';
display:block;
border: .5px dashed ;
}
This works.
For a specific post, I don't want this underlines applied. I added an additional class to the H2 headings that I want to stylize differently: .h2lines
Now, I can exclude this new class (.h2lines) when applying CSS directly to .post h2. For example:
.post h2:not(.h2line) {
color: #blue;}
This works. It will make all post H2 blue except the ones with additional class.
However, I can't get it to work on the :after element:
.post h2::after:not(.h2line)
This does not work. It removes the underline from all H2 headings.
Any help is very much appreciated.
You just use,
.post h2:not(.h2line)::after{}
Each product has multiple variants, which are linked to different thumbnails.
I can click to each thumbnails to preview it on a bigger size
I would like the border of the active thumbnail to be more visible.
I have tried these codes with :active and ::selection but it doesn't work .
.productThumbs li img::selection {
border-color: #ee0a3a !important;
}
.productThumbs li img:active {
border-color: #ee0a3a !important;
}
I have little experience with :active or ::selection attribute
Link of a product page: https://www.tresor-ethnique.com/collections/africain/products/boucles-oreilles-fleur-etoilee?variant=6090700914718
You're looking at the wrong CSS selector. Also, :active has an entirely different meaning in this context. It means a link that's currently being activated by the user (think of a link currently being moused down on): Read more here.
The selector you want is this either:
.productThumbs li .active
or
.productThumbs li .active img
This would make your statement look like this:
.productThumbs li .active img {
border: 1px solid #ee0a3a;
}
Or instead of using border: 1px solid #ee0a3a; you can use box-shadow: 0 0 0 5px #ee0a3a; if you want an easy way to have a larger border without the photo size shrinking.
I often use a-tags for buttons, so they have a padding that makes them button like.
How do I change the thickness of the text-decoration underline? People often recommend to use a border-bottom for this, but
A bottom border is something else than underlining, some letters even extend below an underline. Underlining is far more sophisticated than a line below something.
I already use the padding of the elements in question as explained.
I have tried to use a a:hover:after selector to actually have a border-bottom anyway. It seems like css is not giving me a lot of alternatives like text-decoration-underline-height or something similar.
I will then in some way alter the height of that pseudo element to emulate underlining without having a one centimeter distance from the text to the "underline".
It doesn´t seem like the :after pseudo-tag is created using this css-selector. Some have managed to do this, but I do not. So there is nothing to create the hateful border-bottom in.
How do I proceed? Will a proper way of styling text-decoration: underline style underlining be added to css?
Until then, how to underline text using a line of desired thickness?
You could do this using the :after pseudo selector. One of the reasons you cited for not wanting to fake the underline was that you wanted descenders to extend below the underline. Well, you could just use a negative margin on the faked underline to accomplish that(notice how the descender of the p is overlapping the underline):
a {
display:inline-block;
text-decoration:none;
color:red;
}
a:hover {
color:blue;
}
a:hover:after {
background:red;
}
a:after {
display:block;
content:'';
width:100%;
height:4px;
background:blue;
margin-top:-2px;
}
Sample link with descender
I tried using APAD1's method to create an underline and I spent at least 20 minutes thinking there was something wrong with how I was doing it. I couldn't get it to work at all on FireFox, so I came up with this method which worked like a charm for those who might be having trouble.
a{
display:inline-block;
color:red;
text-decoration:none;
border-bottom:4px solid blue;
}
a:hover{
color:blue;
text-decoration:none;
border-bottom:4px solid red;
}
Sample underline
You can also use the padding-bottom property to distance the border from the text. You can't pull it closer though, which I assume shouldn't be a problem since you aren't wanting it too close to begin with.
You could consider using a box-shadow, like this:
a
{
box-shadow: 0 5px 0 rgba(0,0,100, 0.5);
text-decoration: none;
padding-bottom: 5px;
}
My super link
/* offset-x | offset-y | color */
box-shadow: 60px -16px teal;
see definition: https://developer.mozilla.org/en/docs/Web/CSS/box-shadow
The downside of this solution is, that the outline is not clickable.
To overcome this, you can do something like this:
a
{
box-shadow: 0 -5px rgba(0,0,100, 0.5) inset;
text-decoration: none;
padding-bottom: 10px;
}
Totally clickable
I am trying to add a specific color to a specific pseudo element that is shown 6 times throughout the page but I just can't seem to select that specific element (I have no problem selecting all the :after elements, though).
First, my JSFIDDLE is here.
The "triangle" you see here is what I am trying to colorize:
Here's the CSS Code that handles the triangle's color:
.timeline > li > .timeline-panel:after {
border-left: 14px solid #fff;
}
Obviously, if I change the color from #fff to #333, it will affect ALL of the triangles on the page. My question is....how do I only affect a specific triangle? My goal is to change the color of each triangle on the page (in this case, 6 different triangles). I tried to assign an ID to the triangle like so:
#triangle1 .timeline > li > .timeline-panel:after {
border-left: 14px solid #333;
}
and then adding the ID in list tag in the HTML code like so:
<li id="triangle1">
But, that didn't work. Do I need to be more specific? Is there a better way? JQuery?
Your selector is incorrect, use li#triangle1 > .timeline-panel:after {}. li is the element that has your id, not one of the ul's ancestors.
How do I style the vertical bar i.e. "|"? I need to vary the width and the height of the "|".
This is what I am trying to do.
Link 1 | Link 2
Put it in an element, and style the element:
<span class="bar">|</span>
In your style sheet, for example:
.bar { font-size: 20px; }
You shouldn't be using the pipe (|) as a separator, use css instead.
Say the anchors were in a div, with id equal to breadcrumbs, like this:
<div id="breadcrumbs">
One
Two
Three
</div>
You could then add separators between them with a couple css rules, like this:
#breadcrumbs a {
padding: 0.5em;
border-right: 5px solid green;
}
#breadcrumbs a:last-child {
border-right: none;
}
You could vary the size, style and color of the separator with the border-right: 5px solid green rule. Here's an example(updated) in action. Here's some documentation on border styling.
The second rule with :last-child prevents an extra separator after the last element.
To vary the height of the separator, you would change the padding on the first rule.
By popular demand, a list version:
If you put the links in a list:
<ul id="breadcrumb-list">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
And use rules like this:
ul#breadcrumb-list li {
display: inline-block;
margin: 0;
padding: 1em 1em 0 1em;
border-right: 1px dotted blue;
}
ul#breadcrumb-list li:last-child {
border-right: none;
}
You can use a ul to markup your list of links for better semantics. You have to add the inline-block to put them on one line, li is by default a block level element.
I've also shown a different style you can achieve by varying the padding and border rules.
| is a character, and as such, takes any stylings that you might apply to text. I get the impression though, that you might be trying to use | to construct a box border. If that is the case, you're much better off styling a block level element to have a border that attempting to use characters.
You can't really style individual characters easily with css, unless that's the only character in your element. If it's in a textarea you have no hope. If it isn't, you have hope: you have to manually augment it with <span class="specialBar">...</span> tags whenever it occurs in the text you want to style it in.
You can also just use another unicode vertical-bar character which is more to your liking.
edit, In response to:
"I basically wanted a seprator between links. Am i going in the wrong direction? – original poster"
Ideally you would use spans, which you can shape with CSS to emulate a thin vertical line:
emulate-with-a-span technique - (live demo):
.linkSeparator {
display:inline-block;
margin-bottom:-1em; /*value should be (height-1em)/2*/
height:3em; width:0.25em;
background-color:grey;
margin-left:0.5em; margin-right:0.5em;
}
link1<span class="linkSeparator"></span>link2<span class="linkSeparator">...
images technique:
You could also use images (less elegant, won't go into detail).
sibling selector technique - (live demo):
You can also set the border-left on all links which aren't the first. According to the w3c spec on CSS2 adjacency selectors, "E + F Matches any F element immediately preceded by a sibling element E." Therefore:
.separatedLinks a+a {
border-left: 2px solid black;
}
<??? class="separatedLinks">
link1
link2
link3
</???>
You might be able to find more examples at this google hit: http://meyerweb.com/eric/articles/webrev/200007a.html