This question already has answers here:
How can I override inline styles with external CSS?
(7 answers)
Closed 3 years ago.
I have two questions I seek your help with:
I am trying to remove the grey border using CSS but can't seem to remove it.
My code is:
<p class="product woocommerce add_to_cart_inline " style="border:4px solid #ccc; padding: 12px;">
<span class="woocommerce-Price-amount amount">
<span class="woocommerce-Price-currencySymbol">$</span>
29.00
</span>
<a href="?add-to-cart=511" data-quantity="1" class="button product_type_simple add_to_cart_button ajax_add_to_cart"
data-product_id="511" data-product_sku="plan1" aria-label="Add “Plan 1” to your cart" rel="nofollow">
Add to cart
</a>
</p>
My CSS is:
p.product.woocommerce.add_to_cart_inline {
border:0px;
}
span.woocommerce-Price-amount.amount {
display:none
}
Here is my JSFiddle.
Can someone please let me know why my CSS code does not work?
In Chrome developer tools, is there a way to easily copy the CSS selector?
For example, after pointing out that this is the selector.
Is there a way to easily copy the "p.product.woocommerce.add_to_cart_inline"?
Right now I type it out manually myself. I am pretty sure that there should be a way to copy it and paste it directly?
change your HTML code you have inline css for border in html p tag
<p class="product woocommerce add_to_cart_inline " padding: 12px;"><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29.00</span>Add to cart</p>
or you can add important to css like this:
p.product.woocommerce.add_to_cart_inline {border:none!important;}
Remove border css style from style attribute
<p class="product woocommerce add_to_cart_inline " style="padding: 12px;"><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29.00</span>Add to cart</p>
add !important
p.product.woocommerce.add_to_cart_inline {border:none!important;}
It's not working because of css specificity rules
You are adding border style inline in p tag which has more specificity than css selector.
To fix this, remove the border style from the inline and apply it using another css selector.
Here is updated fiddle
p.product.woocommerce {
border: 4px solid #ccc;
padding: 12px;
}
p.product.woocommerce.add_to_cart_inline {
border: 0px;
}
span.woocommerce-Price-amount.amount {
display: none
}
<p class="product woocommerce add_to_cart_inline"><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29.00</span><a href="?add-to-cart=511" data-quantity="1" class="button product_type_simple add_to_cart_button ajax_add_to_cart" data-product_id="511"
data-product_sku="plan1" aria-label="Add “Plan 1” to your cart" rel="nofollow">Add to cart</a></p>
Related
How do I make the first line of ::after in bold?
I'm making a CSS snippet for Obsidian. I want to make a Dropdown for tags that start with '#-'. How do I make the first line bold?
I can't change HTML code:
<p>
<a href="#-Dropdown" class="tag" target="_blank" rel="noopener">
#-Dropdown
</a>
</p>
Those CSS blocks don't even appear in the devtools:
a.tag[href^='#-']::after::content {
font-size: 20px;
}
a.tag[href^='#-']::after::first-line {
color: red;
}
A jsfiddle if you're willing to try yourself
<ul>
<li>
<a href='#q1' class='contentlink'>
Question One?
</a>
</li>
<li>
<a href='#q2' class='contentlink'>
Question Two?
</a>
</li>
</ul>
<h3 id='q1'>
This is Question One?
</h3>
<p>
This is the answer to question one.
</p>
<h3 id='q2'>
This is Question Two?
</h3>
<p>
This is the answer to question two.
</p>
Without going to jQuery is there a way for me to style a question using some sort of :active CSS to do something like make the selection question a different color? I tried doing:
<h3 id='q3' class='faq'>This is the question?</h3>
Then in my stylesheet:
h3.faq:active {
color: yellow;
}
But it didn't change the question color.
You're looking for the :target pseudoclass. Use it like this:
h3:target {
color: yellow;
}
What you're looking for is the target pseudo-class. It targets the element for which the id appears after the "#" in the URL.
Check out this fiddle: http://jsfiddle.net/9MXq3/
Example CSS:
h3:target{
background: #ddd;
}
I have a slideshow that is imported with a shortcode in WP.
I'm trying to add custom css to each 4th image that is displayed, but with no luck.
Any help would be awesome, thanks.
.thumb-res .ngg-gallery-thumbnail:nth-child(4) img { border: 1px solid #000 !important; }
HTML:
<div class="thumb-res">
<div class="ngg-galleryoverview" id="ngg-gallery-97131261c1bb7b3c15f04e8ef0f97c77-1">
<div class="slideshowlink">
<a href='url'>[Show as slideshow]</a>
</div>
<div id="ngg-image-0" class="ngg-gallery-thumbnail-box">
<div class="ngg-gallery-thumbnail">
<a href="url" title=" " data-image-id='48' class="ngg-fancybox" rel="97131261c1bb7b3c15f04e8ef0f97c77">
<img title="slide4" alt="slide4" src="url" width="174" height="150" style="max-width:none;"/>
</a>
</div>
</div>
<div id="ngg-image-1" class="ngg-gallery-thumbnail-box">
<div class="ngg-gallery-thumbnail">
<a href="url" title=" " data-image-id='46' class="ngg-fancybox" rel="97131261c1bb7b3c15f04e8ef0f97c77">
<img title="slide2" alt="slide2" src="url" width="174" height="150" style="max-width:none;"/>
</a>
</div>
</div>
Your ngg-gallery-thumbnail elements are all single children of their respective parents, so the selector never selects anything. You should select based on elements with the class ngg-gallery-thumbnail-box, which are all siblings:
.thumb-res .ngg-gallery-thumbnail-box:nth-child(4) img { ... }
That said, this is still not going to work exactly as expected because it looks like there are also siblings that are not thumbnail boxes.
This:
$(".thumb-res .ngg-gallery-thumbnail-box:nth-child(4n+1)").addClass("fourth");
FIDDLE
try
.thumb-res .ngg-gallery-thumbnail-**box**:nth-child(**4n**) img {
border: 1px solid #000 !important;
}
with your code you're selecting just the 4th image. you need 4n for each 4th:D
You need to use nth-child(an+b) for direct siblings.
.thumb-res .ngg-gallery-thumbnail-box:nth-child(4n+1) img { border: 1px solid #000 !important; }
Also for add custom css to each 4th image that is displayed you need to use argument in format of "an+b".
For example 4n+1 select 4th, 8th, 12th element etc.
Is there a way to set a css selector's style to be the same as another selector (class in this case) that was earlier defined without javascript?
specifically, my problem is applying bootstrap button classes (btn-small, btn-mini) to different buttons without changing it manually. The reason is that I am replacing the buttons with javascript and since I don't want to rewrite a lot of the code, I want the class to be exterior from the html
so instead of having
<div class="mini">
<a class="btn btn-mini"> some_link </a>
</div>
and
<div class="small">
<a class="btn btn-small"> the_same_some_link </a>
</div>
I could do
<div class="link small">
<a class="btn"> the_same_some_link </a>
</div>
and using css do
.small a{
import .btn-small
}
.mini a{
import .btn-mini
}
could this be achieved with css or scss/sass?
You can do this with Sass by using selector inheritance via #extend.
A solution with SCSS:
.small a{
#extend .btn-small;
}
.mini a {
#extend .btn-mini;
}
Edit: as noted in the comments, you also need to:
#import "twitter/bootstrap"
I have an anchor link which has an image and two spans of text, a title and a tagline with different colors, and i want them to change differently when hovering the link.
<style>
span.title {color: #666;}
span.tagline {color: #aaa;}
</style>
<a class="button" href="http://www.link.com" target="_blank">
<div style="display:block">
<img src="images/button.png">
<span class="title">TITLE</span><br>
<span class="tagline">tagline</span>
</div>
</a>
I wonder if it's possible to use something like:
<style>
a.button:hover span.title {color: #000;}
a.button:hover span.tagline {color: #2ae;}
</style>
Yes thats possible. Psuedo class :hover doesn't have to be for the last element in the selector.
Live Demo: http://jsfiddle.net/H35rf/
For future reference its easier/quicker to try this out for yourself in jsFiddle before asking questions.