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.
Related
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 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(
I am working with this menu: http://cssmenumaker.com/menu/light-opera-drop-down-menu
I would like to make the last menu option unique and have it always highlighted red, with a unique hover/active. The problem I am having is navigating the existing code so that I can add styles to my unique option. I tried identifying it via the , and then I can call it in the stylesheet
#cssmenu ul li.donate:hover > a {
background: red;
This allows me to change the hover to red, but I am unable to get it to just always be highlighted red. I tried
#cssmenu ul li.donate {
background:red;
}
but that does nothing.
#cssmenu ul:last-child li.donate:hover > a {
try using :last-child
The reason your styles do not register is because the selector associated with your background declaration is not specific enough. In CSS, the C stands for Cascading. The browser trickles down or cascades multiple declarations that may or may not affect the same element. Ultimately the styles that will be applied are the ones that come with the most specific selector.
Here's the fiddle that works: http://jsfiddle.net/8kfwQ/2/. Hover over "products" and then "product 2" and you'll see a "Donate" link.
Here's the code that I've appended at the very end of the CSS in the fiddle:
#cssmenu .has-sub .has-sub ul li.donate a {
background-color: blue;
}
The selector is more specific and that's why the default maroon background gets overridden.
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
I have a menu made of an li list. Each li item needs to have a different background color, according to its position in the list:
The first item is pink,
the second is orange,
the third is green,
and so on...
Each item has its own ID, so it's supposedly no problem to give each a CSS style of its own. (For example, the first item's ID is menu-item-30, the second item's ID is menu-item-57, and so on, with random numbers as their IDs.)
However, the site is supposed to operate in different languages, and in each of those languages the list items have different IDs. (For example, the item with ID menu-item-30 in the English menu, has ID menu-item-241 in the French menu.)
I'm wondering if the only way to accomplish this is by adding the IDs to the CSS rules, like so:
#header #access li.menu-item-30,
#header #access li.menu-item-210, /*spanish*/
#header #access li.menu-item-241 /*french*/{
/*add header prefix to li's only'*/
background: url('images/headers/navbar.png') 0 -124px repeat-x transparent;
border-bottom: 3px solid #f26122;
}
Or if there is a way - that will work in IE7 and up - to use a more general rule, such as nth-child or such.
There is one way. You can append rel="home" attribute for element and then with css you will be able do that: #header #access li a[rel="home"] { }
If you don't have access to the code, then the only way is to write css for each element.