HOw to style link with class selected under this html structure
<li class="submenu_items" style="display: list-item;">
<ul>
<li>
<a class="selected" href="/page">Page</a>
</li>
</ul>
</li>
This should do it for you:
.submenu_items ul li a.selected{
/* your CSS properties here */
}
You can also use the > operator to denote a direct descendant.
There are a number of variations in how you can target the .selected link, I'd also reccommend you have a look at the MDN article on CSS specificity
Use the below to style selected
.submenu_items ul li > a.selected{/* your code goes here. */}
Hope this helps.
To over-ride parent styles (in this case 'submenu_items') you just need to make your CSS targeting more specific. For example:
.submenu_items ul li a.selected{
/* Add your CSS */
}
Related
In the code, there are two links and I want to implement different hover effects for both the links (i.e if I hover over I want to buy the link should become red and if I hover over the link I want to sell It should become blue). Please guide me on how I could achieve it
Here is the part of the code:
<ul>
<li><Link to='/buyer'>I want to buy</Link></li>
<li><Link to='/seller'>I want to sell</Link></li>
</ul>
In case if I used an anchor tag I could have used a: hover but was unable to find what to do in the above case.
Define class name to the <li> tag, then by using CSS Descendant Selector (a whitespace), you can reach the <a> tag:
.classNameOfLiTag a:hover {
// styling
}
Descendant selector can select any descendant elements wrapped under <li> regardless how deep. To be more precise, you can use child selector (>) that selects only <a> tag that is directly the children of <li> like so:
.classNameOfLiTag > a:hover {
// styling
}
In your js file:
<ul>
<li><Link to='/buyer' className={class1}>I want to buy</Link></li>
<li><Link to='/seller' className={class2}>I want to sell</Link></li>
</ul>
In your css:
.class1:hover {
color: red;
}
.class2:hover {
color: blue;
}
You can add different class to li and then give it hover styles
<ul>
<li className="link1"><Link to='/buyer'>I want to buy</Link></li>
<li className="link2"><Link to='/seller'>I want to sell</Link></li>
</ul>
CSS
.link1:hover{
// your style
}
.link1:hover{
// your style
}
I'm having a hard time figuring out on how can I control the style of my h2 inside an unordered list. So my structure is like this:
<div name="main_div">
<ul>
<li><h2>Hello World!</h2></li>
</ul>
</div>
On my css, what I've got so far is this:
.main_div ul li h2 {color:#fff}
The thing is, it doesnt change the h2's color. Can anyone help me with this?
<div name="main_div">
.main_div ul li h2 {color:#fff}
div elements do not have a name attribute – and even if they did, .main_div would not select a element by name.
Use a class or an id.
The name attribute is not the same as the class attribute. See here for documentation.
http://jsbin.com/yimayaseni/1/edit?html,css,output
Change to:
<div class="main_div">
<ul>
<li><h2>Hello World!</h2></li>
</ul>
</div>
Your CSS is correct but your HTML is not. Use this:
<div class="main_div">
<ul>
<li><h2>Hello World!</h2></li>
</ul>
</div>
Only the Class attributes are referred when you use the .class selector in CSS
Have a look here: Css Selectors
you need to select your div by the name attribute:
div[name="main_div"] ul li h2 {
color: red
}
<div name="main_div">
<ul>
<li>
<h2>Hello World!</h2>
</li>
</ul>
</div>
This CSS rule will target any h2 element contained within a UL element.
ul h2 {
//Your CSS
}
ul > li makes your selection more specific as it will only select elements which are contained within in an li element which is contained within ul.
ul > li h2 {
//Your CSS
}
I have this DOM Tree:
<ul id="menu-horizontalnav" class="menu">
<li id="menu-item-19">
<ul class="sub-menu">
<li id="menu-item-99" ></li>
</ul>
</li>
</ul>
Now I want that the <ul class="sub-menu"> and his child content is hidden.
I added a new .css rule to my style.css file:
But as you can see it gets overriden by this rule:
If I deactivate display: block; everything works.
My Quesiton is how can I add a .css rule which is only valid for the class="sub-menu"
without getting this rule overriden by the rule .menu ul
In my Understanding from the .css rules the display: none; rule should override the
display: block; rule, because it is deeper in the hiracy
I added my code in the style.css file in my child theme
A trivial way would be to overwrite the CSS rule by marking it as important:
.sub-menu {
display: none !important;
}
But this technique should be avoided if at all possible for various reasons.
The better way would be to explicitely address the place the sub-menu class takes in the DOM hierarchy in your css:
.menu ul.sub-menu {
display: none;
}
This instruction is more specific than just using .menu ul and will thus be preferred by the browser.
Just add the following css:
ul .submenu {display:none !important;}
It should solve your problem and override the ul.menu class
Add
hideMenu
{
display:none !important;
}
Whenever you want to hide , add this class using addClass or just add the property alone.
Whenever you want to remove this, removeClass or remove the property.
I've got a few list items, the first one's with a featured class and the after a while a few without. Withh CSS, I'd like to select the first item in the list that does not have a featured class...
The code is as follows:
<ul>
<li class="featured"></li>
<li class="featured"></li>
<li></li>
<li></li>
<li></li>
</ul>
I've tried the following with no effect:
ul li:not(.featured):first-child {
/* Do some stuff here */
}
Any ideas on how to do this without resorting to jQuery?
UPDATE
The ability does exist to add non-feature classes if that would help. E.g:
<ul>
<li class="listing featured"></li>
<li class="listing featured"></li>
<li class="listing"></li>
<li class="listing"></li>
<li class="listing"></li>
</ul>
Use the "Adjacent sibling combinator": http://www.w3.org/TR/css3-selectors/#adjacent-sibling-combinators
li.featured + li:not([class="featured"])
In addition to the great answer by #Cédric Belin - if you wanted to make the CSS backwards compatable you could use the following CSS selectors:
ul .featured + li {
/* some styles */
}
ul li.featured {
/* some styles */
}
Note that the order of the CSS styles is important here as both selectors have the same weighting - so which ever style comes last will be the one that overrides the previous style (due to the cascading nature of CSS)
Working example: http://jsfiddle.net/Ku77T/
I am trying to run this CSS:
.portfolio-carousel.title a {
text-decoration: none;
}
On this HTML:
<ul class="portfolio-carousel">
<li>
<h4 class="title">
Yahoo
</h4>
</li>
</ul>
But I'm nothing is changing and I'm not sure why.
Your selector is incorrect, you need a space between the class-names to indicate ancestor-descendant relationship:
.portfolio-carousel .title a {
/* CSS here */
}
JS Fiddle demo.
Your original CSS selector was looking for an a element that was a descendant of an ancestor with both classes portfolio-carousel and title, whereas you want an a element that is the descendant of a .title element itself the descendant of .portfolio-carousel element.
References:
CSS Selectors, Level 3.