I am using Wordpress and have the following code to style my menu items
css (the attributes I'm looking to change)
.main-nav li a {
color: #222;
}
.main-nav li a:after {
background-color: #d11e5d;
}
I have applied a custom class .btn-contact on one of the buttons so I can override its color and other attributes but I can't seem to target it. (using .btn-contact { color: red; } or .btn-contact { color: red !important; } doesn't work )
the output
Just add
.btn-contact {
color: red !important;
}
The !important should override every other value for the same property.
I don't know what the :after element is there for, but you need add the content property inside the rule, otherwise it will not render. You can also use en empty string like content: "".
Related
I'm trying to get the colour of text in my component to change based on what class the body tag has on my page, but because of encapsulation (I think) using something like this doesn't work -
body.pink p
{
color: pink;
}
body.blue p
{
color: blue;
}
There are dozens of posts here on SO asking how to change the body's style from inside your component, but I'm after the exact opposite.
Edit: Just to be clear, I only want the CSS to effect my component, they just need to change when body changes.
The following component CSS syntax appears to work:
body.pink :host p {
color: pink;
}
body.blue :host p {
color: blue;
}
See this stackblitz for a demo.
I have lots of vertical lines that are before <a> links, but I want to hide the third line.
Here is my CSS for my <a> before:
.header-social a:before {
//line style
}
I have tried using nth-child(), but i don't know how to use pseudo elements with nth-child().
.header-social a:before:nth-child(4) {
display:none;
}
Not sure how I could go into any more detail than I already have. Do I need JavaScript?
Do like this:
.header-social a:nth-child(3)::before {
color: red;
}
or using nth-of-type
.header-social a:nth-of-type(3)::before {
color: red;
}
My website here I'm creating for a friend is giving me issues with the input[type="button"]. I only a specific style to be applied to the button in the sidebar ONLY. However no matter what I do it effects all buttons.
#sidebar.widget-wrap input[type="button"], input[type="submit"] {
clear: both;
display: block;
margin-top: 2em;
width: 100%;
}
How do I make it only effect the go button in the sidebar?
You must duplicate #sidebar.widget-wrap:
#sidebar.widget-wrap input[type="button"],
#sidebar.widget-wrap input[type="submit"] {
}
Otherwise your selector would result in every input[type="button"] that is inside #sidebar.widget-wrap and every input[type="submit"].
The comma has no special meaning, it only combines two (or more) selectors. The result will always be the same if you use two separate selectors instead of the combined one:
div a, div span { color: yellow }
/* is the same as */
div a { color: yellow }
div span { color: yellow }
There appears to be a WebKit bug that does not apply a hover state to content inserted via the content property in CSS.
Does anyone know a workaround for this?
a:before {
content: "Hover Over Me";
}
a:hover {
color: red;
}
Example: http://jsfiddle.net/wdmedal/X4gjL/1/
Conclusion: This bug seems to only affect inline elements.
Workaround: Set the display type of the element to inline-block (or another display type).
This works for me http://jsfiddle.net/X4gjL/5/
a:before {
content: "Hover Over Me";
}
a.foo:hover {
color: red;
}
a.foo
{
display:block;
}
-------------EDIT---------
Thanks to BoltClock for pointing this out, making it inline-block doesn't make the width 100% by default like block. http://jsfiddle.net/X4gjL/6/
a:before {
content: "Hover Over Me";
}
a.foo:hover {
color: red;
}
a.foo
{
display:inline-block;
}
I have an aspx page with a Masterpage containing a panel with a CssClass of menutoolbar. Within that panel I am placing objects, in this case a linkbutton with a class of SearchLink.
In my Stylesheet, I am defining
.menutoolbar a:hover { color: red }
.Searchlink a:hover { color: yellow }
When I hover over the Searchlink link it is red! This is not what I expect, the Searchlink specifically is defined as yellow, it looks like the parent container menutoolbar is overriding the color, reverse of what I would expect.
How can I make the hover effect yellow for Searchlink?
a.Searchlink:hover { color: yellow }
try doing:
.Searchlink a:hover { color: yellow!important; }
if the link class is "searchlink" you could try
a.Searchlink:hover { color: yellow; }
Alternatively you can be more specific with the rule, e.g.
a.Searchlink:hover { color: yellow;}
Or something like that.