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;
}
Related
I need to style element by page-id. I use for it this:
.page-id-34 .gallery-columns-9 .gallery-item { }
It is possible to style the same, but in relation to all child of page id 34?
Use a wildcard to match all descendants of an element:
.page-id-34 * {
color: red;
}
If you want to style only direct div elements for example it would be
.page-id-34 > div {
color: red;
}
I just got to that. I use:
.parent-pageid-34 .gallery-columns-9 .gallery-item { }
and it works!
Thank you for your participation.
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: "".
In LESS, you can reference a child selector as follows:
<div class="button">
<div class="button-text"> Text </div>
</div>
.button {
&-text {
color:red;
}
}
This will output:
.button .button-text { color:red; }
This is neat and ideal, however, when using a hover, is there a way to maintain the same / similar syntax for the child element? Currently, this wouldn't naturally work:
.button {
&:hover {
&-text {
color:red;
}
}
}
This won't work and as expected, outputs something along the lines of
.button:hover .hover-text { }
Is there a way to get the expected hover result without defining the full class name, in this instance ".button-text"?
Any help would be greatly appreciated.
Because the parents selector & represents all parent selectors (not just the nearest ancestor), nesting under hover, will always include the :hover text.
This rule:
.button {
&:hover &-text {
color:red;
}
}
Will provide the result (lessismore playgroud):
.button:hover .button-text {
color: red;
}
I'm familiar with the :hover psuedo class and using it for elements as well as the typical link setup we're all used to. What I am trying to do however is create a situation where hover over one element would change properties of another. For instance if I were to hover over .block1, #block2 would become visible. I would think the .css would look like something this...
.block1:hover div#block2
{
visibility:visible;
}
but that's getting me nowhere. Thoughts? I know that I could probably use javascript to make this happen (make elements appear and disappear) but I would love to find a pure css solution to this.
The element you want to change has to be a child element of the one you are hovering over.
Example CSS:
#navButton div.text {
display:none;
}
#navButton:hover div.text {
display:block;
}
This will make the text div display if you hover over the element with id="navButton".
Otherwise, use a JQuery solution:
CSS:
#navButton div.text {
display:none;
}
.hover {
display:block;
}
Javascript:
$("#navButton").hover(
function () {
$("#navButton div.text").addClass("hover");
},
function () {
$("#navButton div.text").removeClass("hover");
}
);
Edit:
You can also do this for sibling elements in CSS if the hovered element precedes the element you want to modify. Like so:
#navButton + div.text {
display:none;
}
#navButton:hover + div.text {
display:block;
}
OR
#navButton ~ div.text {
display:none;
}
#navButton:hover ~ div.text {
display:block;
}
If that second element is a descendent of the first, then it will work.
jsFiddle.
i already have a css section:
.leftMemberCol
{
width:125px;
vertical-align:top;
padding: 13px;
border-width:0px;
border-collapse:separate;
border-spacing: 10px 10px;
text-align:left;
background-color:#f2f3ea;
}
for a td section (a left side bar). I want to make all of the links inside this cell be the color green.
is there any syntax like:
.leftMemberCol.a
{
color:#E3E3CA;
}
or any other suggestions instead of having to go to each page and wrapping all the links around another class name.
Just do:
.leftMemberCol a
{
color:#E3E3CA;
}
That will select all anchor tags nested within the element with the class of .leftMemberCol
If the color doesn't work, check if you set it earlier on in your CSS file for any of the pseudo selectors of the a tag, i.e. a:link etc.
override them using
.leftMemberCol a:link,
.leftMemberCol a:hover,
.leftMemberCol a:visited,
.leftMemberCol a:active
{
color: #E3E3CA;
}
replace the last dot with a space
.leftMemberCol a {
style goes here
}
The dot indicates a class. A hash indicates an id (
<div id="home">
can be styled with
#home { }
). A regular html element, like a td or a doesn't need a prefix.
.leftMemberCol a
{
color:#E3E3CA;
}
should do the trick.
You are very close. This is how you select the links inside the cell:
.leftMemberCol a
{
color: #E3E3CA;
}
You can read more about selectors here.
Edit:
If the style doesn't take effect, it's probably because you have some other style defined for the links that is more specific. You can make the style more specific by adding specifiers, for example:
td.leftMemberCol a
{
color: #E3E3CA;
}
As a last resort you can also use the !important directive:
.leftMemberCol a
{
color: #E3E3CA !important;
}
.leftMemberCol>a
{
color:#E3E3CA;
}
.leftMemberCol a
{
color:#E3E3CA;
}
This targets all <a> elements that are descendents of .leftMemberCol