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?
Related
I'm using :target in html and I code something like that:
<div class="1">
<div>
<ul>
link to part 2
</ul>
</div>
<div class="ex">
<ul id="2">
<p>hi</p>
</ul>
</div>
and I've done this in css:
.ex ul {
display: none;
}
.ex ul:target {
display: block;
}
I need to make so that when you click on the link (in this case the words 'link to part 2') the #2 ul show, (alredy done this) and the ul whit the link disappears, how can I do?
One way this can be accomplished is with JavaScript. I added the id remove-on-click to your link which you want removed, and then created a JavaScript event listener to alter the style of this item when it is clicked. You can see the code working here.
<div class="1">
<ul>
link to part 2
</ul>
</div>
<div class="ex">
<ul id="2">
<p>hi</p>
</ul>
</div>
<script>
document.getElementById('remove-on-click').addEventListener('click',function(){
this.style.display = "none";
})
</script>
I did not edit any of your other code, but keep in mind that ul tag should be used with li descendants. If you do not have a li descendant, use another tag, such as a div. Also, you may want to become more familiar with proper naming of class and id attributes, especially in regards to not beginning them with a digit:
https://www.w3.org/TR/CSS2/syndata.html#characters
What are valid values for the id attribute in HTML?
The key consideration to note is that you must write the markup in reverse order.
This is because CSS selectors can only select:
an element itself (or a pseudo-element)
an element's descendant elements
an element's subsequent siblings
It cannot select an ancestor element or (in this scenario) a previous sibling.
Once you have written the markup in reverse order, you can achieve the effect you want using CSS.
Working Example:
#part2,
#part3 {
display: none;
}
#part2:target,
#part3:target {
display: block;
}
#part2:target ~ [id^="part"],
#part3:target ~ [id^="part"] {
display: none;
}
<div id="part3">
<p>This is Part 3.</p>
</div>
<div id="part2">
<p>This is Part 2.</p>
<ul>
<li>Link to Part 3</li>
</ul>
</div>
<div id="part1">
<p>This is Part 1.</p>
<ul>
<li>Link to Part 2</li>
</ul>
</div>
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)
I am trying to debug my footer but I keep getting bugs like
(Element h4 not allowed as child of element ul in this context)
Can anyone explain.
I cant place the HTML because for some reason it does not work.
Probably because there are some mistakes in the code.
Link to my website is
http://www.timberlife.nl
And then inspect element at the footer of the page.
<ul>
<h4 class="footerr">SUPPORT</h4>
<br>
CONTACT
<br>
FAQ
<br>
DISCLAIMER
<br>
</ul>
It starts with this.
<h6 class="text-white copy-text">
Many thanks!
Daan
According to HTML5 spec, you can't have header tags as children within a <ul></ul>, you should populate it with <li></li>, then insert your content within each list like so:
<ul>
<li><h4 class="footerr">SUPPORT</h4></li>
<li>CONTACT</li>
<li>FAQ</li>
<li>DISCLAIMER</li>
</ul>
I also noticed you have wrapped entire blocks of content within header tags, try to avoid that as it also leads to invalid html. Use divs rather.
Reference: w3.org ul element
The error is thrown because your list structure is invalid. All content must be wrapped in li tags.
<ul>
<li><h4 class="footerr">SUPPORT</h4></li>
<li>CONTACT</li>
<li>FAQ</li>
<li>DISCLAIMER</li>
</ul>
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul
Also, you should use a CSS file (or at least an embedded style tag) rather than inline styles:
<style>
ul li a {color: white;}
</style>
If you want to use any heading tag within ul then you should place it within li tag because any list inside ul or ol tags can be made only by li tag.
so please try this
<li><h4 class="footerr">SUPPORT</h4> </li>
This Should work
I'm dissecting Wordpress's default theme TwentyThirteen in attempts to learn HTML&CSS and more importantly, what I believe to be, industry standards for HTML&CSS.
I ran into a part in the CSS that I believe to be redundant but I would like to some insight on (probably) why the Wordpress team used these 2 CSS selectors together.
ul.nav-menu,
div.nav-menu > ul {
First Selector
ul.nav-menu
This first selector relates only to ul elements with a class named nav-menu. For example:
<ul class="nav-menu">
<li></li>
<li></li>
</ul>
Here it relates to the ul element because it is simply a ul with a class of nav-menu.
Second Selector
div.nav-menu > ul
This second selector relates only to ul elements that are direct children (directly below) div elements with a class named nav-menu. For example:
<div class="nav-menu">
<ul>
<li></li>
<li></li>
</ul>
</div>
Here it relates to the ul within the div because it is a ul directly below the div with a class of nav-menu.
I have a style for styling <a> elements in list items in a #navigation container. This is working fine.
#navigation li a {
text-decoration:none;
background:#bfe5ff;
color:#045e9f;
width:125px;
height:35px;
padding-top:11px;
display:block;
float:left;
margin-left:2px;
text-align:center;
font-size:18px;
font-weight:bold;
}
Now in some <li>s I am inserting <div>s. In these I am again using a list again, but it should be different in style or have no style.
When I put in <li>s, their style matches the outer <li> elements, but it should not.
I am trying to use this:
#newnavigation li a {
font-size:12px;
margin-left:20px;
}
but it's not working - it applies the "outer" styles.
This is my markup:
<ul id="navigation">
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li class="browse">
Browse
<div id="browsecontainer">
<h3>Browse By Category</h3>
<li></li>
</div>
</li>
</ul>
It will continue to apply the outer styles - that's the "C" in CSS, cascading. Your new styles are being picked up correctly, but if I am reading the question right you are trying to eliminate the other "inherited" styles like the background colour?
If you want the outer styles to not be applied, then you either need to be using an element that doesn't match the outer pattern (i.e. not an li, not practical here), or to be overriding the styles you don't want applied. If you really only want these styles applied to the outer set of li elements, then consider as an alternative using a CSS class on the outer li elements and applying the formatting you don't want inherited to that class directly.
Your css is targetting the #id newnavigation but your ul #id is navigation
Try the following:
<ul id="navigation">
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li class="browse">
Browse
<div id="browsecontainer">
<h3>Browse By Category</h3>
<ul id="newnavigation">
<li>First category</li>
</ul>
</div>
</li>
</ul>
To select the inner-items, just nest them:
/** Matches outer *AND* inner LIs */
#navigation li {
}
/** Matches inner LIs only (li within li within #navigation) */
#navigation li li {
}
Or, to match the anchors:
#navigation li a {}
#navigation li li a {}
In the inner styles, you will start with a styleset inherited from the outer styles, so you might want to 'undo' some settings by overriding them to fit your needs.
Note that your markup is invalid. To insert new items you should also insert new lists, i.e.:
<ul id="newnavigation>
<li>
<div>
<ul>
<li></li>
</ul>
</div>
</li>
</ul>
It's always a good thing to validate your markup when you have problems with your style, Javascript, etc.
Having said that, to match only inner LIs, the CSS rule you need is:
#newnavigation li ul li{
// stuff here
}
I'm guessing it's something like this?
<ul id="navigation">
<li>link</li>
<li><ul id="newnavigation"><li>link</li></ul></li>
</ul>
I copy and pasted your styles and it's working fine. What is it exactly that is not working?
Update:
My guess wasn't quite right. In the code you show there is no id="newnavigation" to match the #newnavigation css selector.
You can also use a child selector like : #navigation > li
So only the outer li is styled.
Note that IE6 and below does no support child selectors.