css first-child selector help - css

Is there a way to highlight the first link, and only the first link, directly below a list item with class "selected"?
Here is my js fiddle


Yeah, use
.selected > a:first-child {
/* CSS */
}
> limits the selector to direct children.


You can use the first-child selector.
.selected > a:first-child {
color: red;
}
You can use nth-child() to do this as well.
.selected > a:nth-child(1) {
color: red;
}
or
.selected > a:nth-child(1n - 1) {
color: red;
}
:)


.selected > a:first-child {color:red;}
This should work in your case.

Related

Can't apply to direct child when usein :hover

I have a problem with the following css approach.
.element:hover > div > span {
color: #FF0000;
}
On the other hand the following is working
.element:hover div > span {
color: #FF0000;
}
Why is it invalid to use the upper one and is there a workaround for it?

Change pseudo-element style based on grandparent class

Consider the following scss:
.link {
....
span {
....
&:after {
....
.link.active & {
background-color: red;
}
.link:hover & {
background-color: red;
}
I want to change the background-color for the span :after pseudo-element when link is either being hovered or has the .active class.
What I've tried ( the code posted above ) doesnt seem to work.
Is there anything I'm missing ?

you should try it like this scheme :
.link {
span {
&:after {
...
}
}
&.active,
&:hover {
span:after {
background-color: red;
}
}
}
Working example : http://jsfiddle.net/92gqap5y/

This question seems to be asked often, as mentioned in this thread.
They increase the size of the link element to be as large as the span. Though I would recommend moving the :hover selector and .active class to the span element directly.

Nest pseudo class like hover/focus into a hyperlink with LESS

I use LESS.
How can I say that the hover/focus belongs to the first > a can I somehow put the hover/focus inside the > a?
> ul > li > a {
color: #fff;
text-decoration: none;
}
> a:hover, > a:focus { // login, register
background-color: #navbar-background-color;
}

You can use LESS's Parent Selector (&) to include selectors belonging to the current selector:
The & operator represents the parent selectors of a nested rule and is most commonly used when applying a modifying class or pseudo-class to an existing selector.
> ul > li > a {
...
&:hover,
&:focus {
...
}
}

Understanding link pseudo class inheritence

I have a simple setup with a:link, a:visited a:hover and a:active all defined at the top of my style sheet. I also have a div where I've defined an a:link color for anchors inside of it. When I do this those links do not inherit the remaining pseudo classes for hover and active.... until I click that div's link and it has thus been "visited", at which point the pseudo classes start working. Why is this?
the CSS...
a:link {
color: blue;
}
a:visited {
color: purple
}
a:hover {
color: red;
}
a:active {
color: pink;
}
#theDiv a:link {
color: green;
}
the HTML...
The First Link
<div id="theDiv">
The Second Link
</div>
http://jsfiddle.net/ZKztj/7/

#theDiv a:link has a higher specificity than all your other selectors and is overriding them until the link no longer matches the :link selector, at which point it matches the :visited selector.

All browsers set a default style for anchor elements.
You need a more specific selector to override:
#theDiv a:hover {color:red}

contextual id selector css

I'm having trouble with this rule not being applied:
h1#header_i { color:red; }
This works:
h1 { color:red; }
This works:
#header_i { color:red; }
I'm trying to only apply the rule to <h1> tags within id="header_i" divs.
Thanks

You're looking for the descendant selector:
#header_i h1 {
color: red;
}
http://cssdesk.com/hCxEv

Resources