I have a html strucute which looks like this
<div class = "f">
<a href="" class ="d" >
<span class ="b"> hello </span>
</a>
</div>
The activeElement is always the 'a' but I want to give to outline to span when 'a' is active. (By active I mean when we navigate by tab and 'a' becomes the activeElement)
I tried doing something like
.a:active {
&.b:focus{
outline : 1px solid white:
}
}
This works fine for me jsfiddle.
<a href="" class ="d" >
<span class ="b"> hello </span>
</a>
a:active > .b {
outline: red solid 3px;
}
This should be what you want, when a is active b will get an outline:
.a:active {
.b {
outline : white solid 1px;
}
}
Also your outline values are in the wrong order, so I changed them.
Related
Let's say I have a page which displays emotion and the corresponding text for it.
I wanted to change color of text based on the type of emotion. I've followed nesting inside text class but that didn't apply the styles mentioned for the text alone. Is there any way to do this?
.emotion{
display: flex;
&__text {
outline: 1px solid blue; // Not applied
&--happy{
color: rebeccapurple
}
&--sad{
color: yellow
}
}
}
<div class="emotion">
<span class="emotion__text--happy">
Happy
</span>
<!-- <span className="emotion__text__sad"></span>
<span className="emotion__text__tears"></span>
<span className="emotion__text__joy"></span> -->
<span class="emotion__happy">
😀
</span>
</div>
Your SCSS:
.emotion { &__text { outline: 1px solid blue; } }
means the same as this CSS:
.emotion__text { outline: 1px solid blue; }
And the class selector .emotion__text means:
✅ Elements which are members of the emotion__text class.
You don't have any elements that match.
You have an element with class="emotion" and one with class="emotion__text--happy" but not class="emotion__text"
It doesn't mean:
❌ Elements which are members of any class which starts with emotion__text.
You could add that class to an element:
class="emotion__text emotion__text--happy"
I have 3 different links in my html and I want to change the text color of only one specific link when I hover over. The problem is that when I apply the css, it changes the color for all the links. Please help!
You should put different id to your component for example
<a id="link1"></a>
<a id="link2"></a>
Then in your css change by doing that :
#link1:hover {
color: red
}
#link2:hover {
color: green
}
<a id="link" ></a>
#link:hover {
color: #F48832;
}
Append an unique class or id to the links in the html,then apply the css
.link1:hover{
color: red;
}
.link2:hover{
color: green;
}
<a class="link1">link1</a>
<a class="link2">link2</a>
Try this....
You should add custom css class to your specific link and that css class to add below css..
.specific_link:hover{
color: blue;
}
a:hover{
color: red;
}
<a class="specific_link">link1</a>
<a>link2</a>
<a >link3</a>
I am working with a template. The client is wanting the three buttons different colors. All three are controlled by the same class. I can change the background color to be different if I inspect the page and I can insert it in the element style. How can I make this change permanent in the CSS?
This is the current buttons:
This is how the client would like the buttons:
The CSS controlling this is:
.full-width .generic .third p a {
background-color: #543D91;
border-bottom: 1px solid #fff;
color: #fff;
display: block;
float: left;
padding: 10px 0;
width: 100%;
border-radius: 99em;
}
How can I change this so that each button is a different color? Is this even possible? It has to be done in CSS. I can not use JavaScript/jQuery or anything like it. It has to work in a JSFiddle in only the CSS and HTML. Note that the HTML is created only the label for each button. I cannot make the hyperlink have a style.
If this is not possible can you please give me the codes that I can have 3 images centered with buttons in a container that is 900px with padding between? I appreciate everyones help!
You could use 2 classes and create a CSS like:
.cls {
color: #FFF;
padding: 10px 0;
width: 30%;
}
.c1 {
background-color: #F00;
}
.c2 {
background-color: #0F0;
}
.c3 {
background-color: #00F;
}
<button class="cls c1">Button1</button>
<button class="cls c2">Button2</button>
<button class="cls c3">Button3</button>
I have tried to solve your question using jQuery, try and have a look, it's simple and works like magic:
This is the dummy HTML:
<div id="searchable">
<a>
Something
</a>
<button>
Something
</button>
<a>
Something2
</a>
<button>
Something2
</button>
<a>
Something3
</a>
<button>
Something3
</button>
</div>
This is the required jQuery for this:
var buttons = $("#searchable").find("button");
var color = ["red", "blue", "green"];
buttons.each(function(i){
$(this).css('color', color[i]);
});
Here is a link to my fiddle:
https://jsfiddle.net/x5ve63w5/1/
I have this html markup which I can't change due to my theme.
<div class="x-breadcrumb-wrap">
<div class="x-container max width">
<div class="x-breadcrumbs"><span class="home"><i class="x-icon-home" data-x-icon=""></i></span> <span class="delimiter"><i class="x-icon-angle-right" data-x-icon=""></i></span> Guides <span class="delimiter"><i class="x-icon-angle-right" data-x-icon=""></i></span> <span class="current"> london <span class="delimiter"><i class="x-icon-angle-right" data-x-icon=""></i></span> <span class="current">Stays <span class="delimiter"><i class="x-icon-angle-right" data-x-icon=""></i></span> <span class="current">Venue</span></div>
</div>
</div>
I am trying to remove the background for the first:child (i.e. home icon) but using the code below the background is removed for subsequent links in the breadcrumbs.
.x-breadcrumb-wrap a {
color: #ffffff !important;
background: #2b2b2b;
padding: 1px 6px 1px 6px;
text-shadow: none !important;
letter-spacing: 0.13em;
border-radius: 3px;
}
.x-breadcrumb-wrap a:first-child {
background: transparent;
}
any ideas ?
Your selector isn't working as expected because it is selecting all of the descendant a elements that are a first child.
You need to use the direct child selector, >, in order to only target the direct child a element of the .x-breadcrumbs element. In doing so, only the first child in the .x-breadcrumbs element is selected rather than all of the descendant elements that happen to be the first child of their parent element.
.x-breadcrumb-wrap .x-breadcrumbs > a:first-child {
background: transparent;
}
I have a scenario where I want to have the text links with border-bottom, and set-up the css like this
a:hover {
color: #492512;
border-bottom: 2px dashed #94705A;
}
The problem is that the images that are wrapped in links also have this border-bottom, eg.
<a href="home">
<img src="logo.jpg" alt="Logo" class="logo-img">
</a>
How can I target the a:hover that it is only for text links? Pure CSS would be preferable.
No problem.
Add a class to your text links. Then target those links like this.
a.testing:hover {
color: #492512;
border-bottom: 2px dashed #94705A;
}
<a href="home">
<img src="http://cdn.sstatic.net/stackoverflow/img/sprites.svg?v=bc7c2f3904bf" alt="Logo" class="logo-img">
</a>
<a class="testing" href="home">
TESTING
</a>
Hope this helps.
Added with EDIT
Here is Another Option
a:hover {
color: #492512;
border-bottom: 2px dashed #94705A;
}
a[href*='ignorethis'] {
text-decoration: none !important;
border-bottom: 0 none !important;
}
<a href="http://www.milk.com?ignorethis">
<img src="http://s.w.org/style/images/wp-header-logo.png" alt="Logo" class="logo-img">
</a>
<a href="http://www.milk.com">
TESTED
</a>
This achieves the same thing by targeting target all anchors whose href attribute contains the given value ('ignore this'). Other ways this can be used.
attribute *= contains value
attribute ^= begins with value
attribute $= ends with value
To use this just append '#special-test-value' to the end of the link or in the case of a targeted link append '?special-test-value=0' or in the case where the query string already exists use '&special-test-value=0'
I thought this was an interesting way to target links and that it might be new to a lot of people.
Another use case
If the case is that a single url or a specific set of urls you could use them to end target them and exclude the anchored images that way.
a[href$='somedomain.com/url1/'], a[href$='somedomain.com/url2/'], a[href$='somedomain.com/url.../'], a[href$='somedomain.com/urlN/'] {
text-decoration: none !important;
border-bottom: 0 none !important;
}
OK that's it have a great night.
Two ways, either wrap the text in a span (below sample) or set a unique class to links with text only.
a {
text-decoration: none;
}
a:hover {
color: #492512;
}
a:hover :not(img) {
border-bottom: 2px dashed #94705A;
}
<a href="home">
<img src="http://placehold.it/50/100/" alt="Logo" class="logo-img" />
</a>
<br>
<br>
<a href="home">
<span>Text</span>
</a>
It seems that pure CSS global styling doesn't work, so I resorted to jQuery to add a class to anchors which have images, like this:
jQuery("a").each(function(){
if ( jQuery(this).children('img').length > 0 ) {
jQuery(this).addClass("noborder");
}
});
And the CSS is:
a:hover {
border-bottom: 2px dashed #94705A;
}
a.noborder:hover {
border-bottom: none;
}
Thanks for all the comments and suggestions.
Cheers!
Well you can make a separate class for image links:
a:hover {
color: #492512;
border-bottom: 2px dashed #94705A;
}
a.image-anchor:hover {
border-bottom: 0 none;
}
<p>Text link</p>
<p><a class="image_anchor" href="stackoverflow.com"><img src="https://blog.stackoverflow.com/images/wordpress/stackoverflow-logo-300.png"></a></p>