I have an auto generated Wordpress menu that's created the following:
<li class="page_item page-item-23 page_item_has_children">
Main item 1
<ul class="children">
<li class="page_item page-item-52498 current_page_item">
Item 1
</li>
<li class="page_item page-item-52496">
Item 2
</li>
<li class="page_item page-item-52477">
Item 3
</li>
</ul>
</li>
I want to say when I'm on the first sub item, highlight the main li.
This is the CSS I'm using (ideally this would be more simple but due to the nature of the auto generated menu it's a bit messy!):
.page-item-52498.current_page_item li.page-item-23 a {
color:white!important;
font-family:'Museo Sans W01 500'!important;
}
At the moment this doesn't make the first li a white.
That CSS selector doesn't work. You cannot select the .page-item-23 as a child of .page-item-52498, as it is a container for the other in the markup structure.
Have you tried outputting the page ID using the body_class function of WordPress? Then you could try using a selector such as body.page-id-52498 li.page-item-23 a or similar.
The body_class function is used as such (most probably in the header.php template file of WordPress):
<!-- <head> somewhere above -->
<body <?php body_class(); ?>>
<!-- rest of the template somewhere below -->
It should output something similar to this (with a dynamic ID number of course):
<body class="page page-id-112 page-template logged-in admin-bar">
Whenever you've used body_class and it outputs the specific page ID you've declared in the CSS selector I wrote above it will take effect (following standard cascading rules of course).
One for the future - the subject selector should be arriving in CSS4. It's going to be very powerful but easy to abuse I think.
Syntax
!subject > selector {
/* declarations */
}
Example
!ul > li {
border: 1px solid green;
}
Scrolling down to the Parent Selector: http://coding.smashingmagazine.com/2013/01/21/sneak-peek-future-selectors-level-4/
And http://css4-selectors.com/selector/css4/subject-of-selector-with-child-combinator/
Related
I have the following code
<div class="wrapper">
<nav id="sidebar">
<ul class="list-unstyled components">
<li class="navhead">My Title</li>
<li> Introduction</li>
<li>
First Category
<ul class="collapse list-unstyled" id="firstCategory">
<li>Intro</li>
<li>First Item</li>
...
<a id="firstItem"></a>
<div id="firstItemDiv" class="internal">
...
I used to hide the internal class in my $(document).ready(function () with $('.internal').hide(); if a URL parameter was specified. However, this caused DOM/Page flicker, so I added .internal {display: none} to my .css file and now call $('.internal').show(); in my ready when the parameter is specified.
In other words, Intro always shows, but First Item should only show when the URL parameter is specified.
This works great for my firstItemDiv, but my sidebar internal li element (First Item) still shows. How can I get it not to show by default?
(true confessions: I was able to peek at the actual page with the issue)
The issue here was that there was a more "specific" rule that was overriding the "internal" class rule.
There was a rule with "id" specificity:
#sidebar ul li a {
display: block;
}
and another with class specificity:
.internal {
display: none;
}
changing the second one to:
#sidebar .internal, .internal {
display: none;
}
should fix it.
You should attach css also. If I understand correctly you change .internal ( hiding or showing ) and it works for id='firstItemDiv' and doesnt work for class="sidebar internal" because it uses some javascript propably...
Try to use
$(".internal').css("display" , "none!important") instead of $(".internal").hide() and
$(".internal').css("display" , "block!important") instead of show().
Given the following html:
<ul class="nav">
<li class="level0">..</li>
<li class="level0">..</li>
<li class="level0 active">
Category Name
<ul class="level0">
<li class="level1 active">
Sub-category
<ul class="level1">
<li class="level2 active">
I only want this link styled
</li>
</ul>
</li>
</ul>
</li>
<li class="level0">..</li>
</ul>
How do I only style that nested link, considering that each parent li also has a class of 'active'? I thought I could use .nav .active:last-child > a which works in the above example, but removing the active class from that li.level2 you would expect then that the li.level1 above it would be styled, but it is not (see jsfiddle below for an example of this).
I may just be having a brainfart but I can't think of a way to target that element with only css. The only thing I can think of is to use javascript to remove the 'active' class from the parent elements, but I feel like there must be some other way.
Here is a more elaborate jsfiddle example that illustrates two test cases: http://jsfiddle.net/K4e37/
Is this possible without changing the markup and without using javascript?
Edit: I wasn't thinking about last-child correctly but here is an updated example which gets pretty close to what I want, just need to not style the higher level elements: http://jsfiddle.net/K4e37/2/
Based on other answers (here, here), the answer to your question is no. As summarized there, "last-of-type" does not work with classes and "last-child" does not work with the sub-nesting structure in your HTML. I think you'll have to change the markup or use Javascript.
List item
If you don't even have the 'level' classes, still you can target your specific html link with the below selector( if you only needs that specific link to be styled ). Please link if your requirement fulfills!
Usiong CSS:
ul.nav li ul li ul li.active a {
color: #FF0000;
}
Cheers :)
Myself in the beginning stages of javascript want to achieve the following.Say I had some li tags which are further included with some li tags like this.
<ul>
<li>
<ul>
<li class="2"></li>
<li class="2"></li>
<li class="2"></li>
</ul>
</li>
<li>
<ul>
<li class="2"></li>
<li class="2"></li>
<li class="2"></li>
</ul>
</li>
</ul>
Now class 2 block is hidden originally in the page.My work is when someone hovers on a link of class 1 its respective block ( i.e., class 2) should display.But the code i had written is displaying all blocks having class 2
May be i can write a mouseover() function for each link of class 1,but is it correct?I had seen this type effect in some sites like linked in,awwwards.com
Example link is
Best Colorful Websites | Web Design Inspiration
In this link when mouse is hovered on a image,then for only on that image a symbol is display on corner bottomI want this type effect.
Can any please help me??Thanks in advance??
Well this can be achived with css only:
ul ul{
display:none;
}
ul > li:hover ul{
display:block;
}
try a fast css solution (not tested because you did not put a jsFiffle code axample)
ul li:hover ul li.2
{
display:block;
}
also, do not use only numbers in class names... will not work on some browsers
try class="c2" at least
I'm wanting the text in the navigation bar to display a different color when the user is on that page so the user knows where they are. I can get this to work in all the browsers with just a single page, but things get funny when I start working with the children pages. In Chrome the parent page, a placeholder link (active4) responds but so do all the children pages (active4a-c), in both IE and Mozilla the individual child page (active4a) responds but the parent page (active4) doesn't. The CSS for these classes are in an internal style sheet so once you leave the page the links revert to the style in the external style sheet.
<li class="active4" ><a href="#" >Reviewers</a>
<ul>
<li class="active4a">Reviewer Information</li>
<li class="active4b" ><a href="#" >How</a></li>
<li class="active4c"><a href="#" >Future</a></li>
</ul>
</li>
.active4 a:visited {
color:#6206F7;
}
.active4a a:visited {
color:#6206F7;
}
I don't think the :visited pseudo-selector is what you want. This selects the <a> tag after it has been visited even once. So, once a visitor clicks on the link, it will always be the new color. Instead, try creating an active class that only selects <a> elements that are children. Here is some working code:
<!doctype html>
<html>
<head>
<style>
a:link {
color:blue;
}
a:visited {
color:blue;
}
.active > a:link {
color:red;
}
.active > a:visited {
color:red;
}
</style>
</head>
<body>
<ul>
<li class="active" ><a href="#" >Reviewers</a>
<ul>
<li class="active">Reviewer Information</li>
<li><a href="#" >How</a></li>
<li><a href="#" >Future</a></li>
</ul>
</li>
</ul>
</body>
</html>
The one thing I want to point out is the > between the .active and the a:link. This selects only <a> tags that are children of the .active. If you omit this, it will select all descendents which will lead to the problem you were having earlier.
Whats wrong with my code below.my code below doesn't work fine
<ul>
<li><font-color ="Red"/> Text 1</li>
</ul>
Font-color isn't a valid HTML tag or style declaration. Syntactically, it's illegal.
Instead, it should be something like: <li style="color:red">foo</li>
However, it is almost always better to move styles into their own stylesheet, and use a class name instead:
HTML
<li class="my-class">foo</li>
CSS
.my-class { color: red; }
As #JanDvorak noted, try to use descriptive names for classes like "highlight".
You can also use other selectors to style your elements, such as an ID selector:
HTML
<li id="item1">foo</li>
CSS
#item1 { color: red; }
It should be:
<ul>
<li style="color: Red;"> Text1</li>
</ul>
Font is not a self closing tag. Also it's deprecated so you should look at changing that if possible. It should look like this:
<ul>
<li style='color:red'> Text 1</li>
</ul>