If I have a child inside a div with an id, for example, id="mother", how correctly to write css?
Example:
1) #mother ul li {...}
or
2) mother ul li {...}
Is there a difference? The second example I saw when MOTHER had a class name, not id.
Your first approach is the right one
when you have:
HTML:
<div id="mother">
<ul>
<li>first child</li>
<li>secondchild</li>
</ul>
</div>
CSS:
#mother ul li {
color:red;
}
Your second approach have to change like this:
div ul li {
color:red;
}
mother is a type selector. It matches <mother>
#mother is an id selector. It matches elements with id="mother".
.mother is a class selector. It matches elements with class="mother and-possibly-other-classes".
See the selectors specification for more.
First one is correct with using id, second one is for class but with a 'dot' in-front of class name.
eg1:
HTML
<div id="div1">
<ul>
<li></li>
.........
.........
<li></li>
</ul>
</div>
CSS
#div1 ul li{
}
eg2:
HTML
<div class="div1">
<ul>
<li></li>
.........
.........
<li></li>
</ul>
</div>
CSS
.div1 ul li{
}
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 have the following ul list:
<ul class="list">
<li>
<ul>
<li></li>
</ul>
</li>
<li></li>
<ul>
How can I apply CSS style to last li of parent class="list", not for nested ul inside ul
You need last-of-type and >
.list > li:last-of-type {
color: red;
}
<ul class="list">
<li>a
<ul>
<li>a</li>
</ul>
</li>
<li>c</li>
</ul>
As you mention that you want last element of li's parent you use last-of-type selector, which matches every element that is the last child of a particular type, of its parent.
Second, to only match the outer most li and not nested one's, you use the child selecor > which in this case says: match the last of type which is an immediate child of an element having a class named .list
You also want to have a look at this.
try this
demo
css
ul.main > li > ul> li:first-child > a {
background:green;
}
DIRECT CHILD SELECTOR (CSS3):
ul.list >li:last-of-type{
color:red;
}
<ul class="list">
<li>Parent First Child
<ul>
<li>Child</li>
</ul>
</li>
<li>Parent Another Child</li>
<li>Parent Last Child</li>
<ul>
Note : > is used for selecting direct child of ul.list
Here is the details about CSS Pseudo-classes
I have issue in css syntax .
<div class="demo">
<p>This is stackoverflow</p>
<ul>
<li>first</li>
<li>sec</li>
</ul>
</div>
Then how I should apply more than one css in each p and ul .
Not sure I'm really understanding your question..
HTML
<div class="demo">
<p>This is stackoverflow</p>
<ul>
<li>first</li>
<li>sec</li>
</ul>
</div>
These would let your target the p and ul seperately, applying whatever rules you want to them.
CSS
div.demo p{
color:red;
}
div.demo ul{
color:blue;
}
If you wanted to add more classes, you could do something like this
HTML
<div class="demo">
<p class="paragraph">This is stackoverflow</p>
<ul class="list">
<li>first</li>
<li>sec</li>
</ul>
</div>
These would let your target the p and ul at the same time, applying whatever rules you want to them.
CSS
.paragraph, .list {
color:green ;
}
You could also combine the two, and rather than add new classes, just specify that you want to apply the rules to both.
HTML
<div class="demo">
<p>This is stackoverflow</p>
<ul>
<li>first</li>
<li>sec</li>
</ul>
</div>
These would let your target the p and ul at the same time, applying whatever rules you want to them.
CSS
div.demo p, div.demo ul{
color:purple;
}
There are tons of ways to do things; if you could add more detail to your question we'd be able to help you better.
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.