I am trying to understand selectors if I had something like
#topbar .ink-navigation ul.black li a.logoPlaceholder
does it mean I can issue a
<li class="logoPlaceholder">
or
Test</li>
There are lots of css selector tricks you can do, I started studying css selector in this CSS game
But let me answer what's that selector is calling ..
#topbar .ink-navigation ul.black li a.logoPlaceholder
so basically this select an a tag element that has a class of logoPlaceholder inside an li that is also inside in a ul tag with a class .black which is also inside in a element with a class .ink-navigation with a parent element that has an id topbar
Edit: Added a code to demonstrate what I mean:
<nav id="topbar">
<div class="ink-navigation">
<ul class="black">
<li>
//Selectors call this element.
<a class="logoPlaceholder"></a>
</li>
</ul>
<ul class="white">
<li>
//Selectors won't call this because li tag was not inside a ul with a class of black.
<a class="logoPlaceholder"></a>
</li>
</ul>
</div>
</nav>
The second one is correct.
a.logoPlaceholder
Means that the <a> tag has the class logoPlaceholder, like this:
`<a class="logoPlaceholder" href="#">Link text</a>`
In fact, it is also telling you that the basic HTML scaffolding looks something like this:
<tag id="topbar">
<tag class="ink-navigation">
<ul class="black">
<li>
<a href="#" class="logoPlaceholder">
The elements that are labelled tag are not specified, so impossible if they are DIVs or NAV or ASIDE or SECTION or ? (But, I would guess the first one is a NAV and the second is a DIV)
Related
I have to make a few changes to the menu of my company's website, including a dropdown menu. The thing is, our website is made with Prestashop, which kind of messed up the hierarchy of the HTML. It pretty much looks like this:
<ul class ="menu">
<li>
<a href="" class="sf-with-menu">
<ul class ="submenu">
<li>
<a href="">
</li>
<li>
<a href="">
</li>
</ul>
</li>
</ul>
I want to have the ul with the class .submenu open when I hover on .sf-with-menu, which are both at the same level in the page's hierarchy. Is that possible only with CSS? I'm very limited with Prestashop regarding the HTML, since I've read changing the HTML would basically break everything when we update our modules, so I'd like to stick to CSS only if possible.
I suppose you could use the + selector, which selects "elements that [are] placed immediately after (not inside) the first specified element," like this:
<ul class ="menu">
<li>
Anchor
<ul class ="submenu">
<li>
<a href="">One
</li>
<li>
<a href="">Two
</li>
</ul>
</li>
</ul>
<style>
.submenu {
display: none;
}
.sf-with-menu:hover + .submenu {
display: initial;
}
</style>
This applies the styles to every instance of .submenu placed immediately after .sf-with-menu, when hovering over .sf-with-menu.
It will only highlight the first instance though, as you can see in this demo, so if you have the structure:
.menu
li
.sf-with-menu
.submenu
// stuff in menu
.submenu
// stuff in menu
...then only the first submenu will be opened on hover.
See here for more CSS info.
I am trying to find a solution to this validation error. I have an image grid with thumbnails that bring up a modal when clicked. Everything works correctly but it does not validate. I can't put li around the modal image or it shows before clicked. I am pretty new to coding, any help would be great.
Line 54, Column 41: Element a not allowed as child of element ul in this context.
(Suppressing further errors from this subtree.)
<a href="#_" class="lightbox" id="img10">
code:
<ul class="cbp-rfgrid">
<li>
<img src="images/portfolio/goat-tn2.jpg" alt="logo">
</li>
<a href="#_" class="lightbox" id="img10">
<img src="images/portfolio/goat.jpg" alt="logo">
</a>
</ul>
The content model of ul does not allow an a child, in any version of HTML. You need to wrap the a element inside an li element, if you wish to have it inside a ul element.
It is not clear why you are using ul in the first place. If the second image is not visible initially, that surely depends entirely on style sheets and scripts involved. As they have not been disclosed, it is impossible to say how you should rewrite the code.
You must wrap every inner ULs with an LI.
The children (direct descendants) of a ul element must all be li elements. This is a purely syntactic requirement.
You can see then hope fully clear.
correct semantics for ul in ul
<ul class="menu">
<li>
Demo1
</li>
<li> <----
<ul class="inside">
<li>Lorem ipsum</li>
<li>Lorem</li>
</ul>
</li> <----
Select just the First ul in class area by css
<div class='area'>
<div>
<ul>
<li>
<ul>
</li>
</div>
</div>
<div class='area'>
<div>
<ul>
<li>
<ul>
</li>
</div>
</div>
<div class='area'>
<div>
<ul>
<li>
<ul>
</li>
</div>
</div>
I tried this
'.area > ul' # This is not working as div is in between the .area and ul
Is there a different way to select the elements without referencing the in-between div in the selector?
So, Finally I should get just 3 ul without nested ul's
Update
In some other templates of my code the first ul comes after the second level
So to avoid confusion in selector, I am trying to avoid the inbetween divs.
Assuming you actually had valid HTML, you could use the * wildcard selector, which is as close as you're going to get to "[not] referencing the in-between div". That said, what's wrong with referring to the child <div>?:
.area > * > ul {
// Properties
}
Using > * matches any child tag, so it makes your CSS slightly more flexible, if that's your end goal.
For (potentially) two levels of elements, assuming they're <div>s, you can do the following:
.area > div > ul,
.area > div > div > ul, {
// Properties
}
'.area ul' would be the selector you are looking for if your html was correct.
edit:
Sorry, the html is kind of confusing... I thought those were </ul>s and that <ul>s were overlapping with <li>s.
This question my be relevant to your problem:
Similar to jQuery .closest() but traversing descendants?
I have some markup and I would like to know if it is proper to surround <li> tags with <div> tags.
<div class="round3">
<ul>
<div class="top"><li class="winner first"></li></div>
<div class="bottom"><li class="winner last"></li></div>
</ul>
</div><!--end round3-->
Thank you for helping.
No, it is not, the only tags that can go directly inside ul elements are li elements.
You can however, place a div inside a li element if you wish.
<ul>
<li><div>Example</div></li>
</ul>
For more information about HTML lists, see the relevant W3 specification section.
It is not possible.
I propose such correction:
<div class="round3">
<ul>
<li class="winner first top"></li>
<li class="winner last bottom"></li>
</ul>
</div><!--end round3-->
<div>
<div class="header">
<div id="navbar" >
<ul id="nav">
<li><a id="trigger"><span><p></p></span></a></li>
<li><a id="target"><span><p></p></span></a></li>
</ul>
</div>
</div>
</div>
hey guys, I've got a question, if it wouldn't causing any inconvenience to you guys, in relation with traversing in HTML tree.
I already know how to choose the <a id="trigger"></a> with this syntax:
div>div.header>div#navbar>ul#nav>li>a#trigger:hover {CSS} will trigger changes.
But here's the problem, I wanted to target the <a id="target""></a> tag underneath it but I haven't found the right syntax for accessing the <a id="affected"></a> there.
I want when I hover the id="trigger", the id="target" will be affected.
I've already tried using + selectors to target that id, alas, the trials ended in vain.
Is it possible to affect that id?
You probably want the adjacent sibling selector:
#trigger:hover + #target {}
Or maybe the sibling combinator, which doesn't require that the second element be directly adjacent:
#trigger:hover ~ #target {}
http://css-tricks.com/child-and-sibling-selectors
UPDATE: As is stated in the comments below, the selectors must actually be siblings. In the original structure, they're not.
<div>
<div class="header">
<div id="navbar" >
<ul id="nav">
<li class="one"><a id="trigger">Trigger</a></li>
<li class="two"><a id="target">Target</a></li>
</ul>
</div>
</div>
</div>
.one:hover + .two {color: red}
http://jsfiddle.net/5Gmz9/1/
Here's another approach which doesn't require classes or IDs on the li elements:
#nav li:first-child:hover + li {color: red}
http://jsfiddle.net/5Gmz9/2/
Each approach has its pitfalls.
By the way,
div>div.header>div#navbar>ul#nav>li>a#trigger:hover {}
could probably be as well written as
#navbar #trigger:hover {}
saving you and the browser both some work.