In this example http://jsfiddle.net/eFhRE/1/ I wan't to make the a tag with id shoshone red with help of :first-child. Must be only the a tag with id shoshone and only with the use of :first-child. The rest of the a tags must remain blue.
Here is the html code:
<ul>
<li class="mosonkhani">
<a id="shoshone" href="#">Potsmare</a>
<ul>
<li>Lorem</li>
<li>Ipsum</li>
<li>Dolores</li>
<li>Quiddam</li>
</ul>
</li>
</ul>
This is the css code I have tried with:
a { color:#00f; }
.mosonkhani:first-child {
color:#f00;
}
How to do this?
.mosonkhani > :first-child {
color:#f00;
}
You want the first child within .mosonkhani. What you had was an element with class
mosonkhani which is also the first child.
http://jsfiddle.net/eFhRE/3/
.mosonkhani > a:first-child {...}
.mosnokhani:first-child would give every element (with class="mosonkhani")thats the first child inside an element the red color property.
Well .mosonkhani > a {...} would work in this case too.
you dont need first-child.
a { color:#00f; }
.mosonkhani > a {
color:#f00;
}
http://jsfiddle.net/eFhRE/6/
Pseudo class :first-child matches the first element in its prefix.
Your code will match the first ".mosonkhani" element in the document.
If you have to select the first 'a' (link) element in any .mosokhani, use:
.mosonkhani a:first-child
{
color: #f00;
}
There is no reason to complicate this width first-child or nth-child
Your anchor tag has an ID...use it
CSS
#shoshone {
color:red;
}
JSFiddle
.mosonkhani>a {
color:#f00;
}
Yes. I know i am not using the first-child.
You are using :first-child wrong.
.mosonkhani > a:first-child {
color:#f00;
}
That should do what you want.
Your Fiddle, updated: http://jsfiddle.net/jeffijoe/eFhRE/2/
first-child will get you the first instance of whatever your selector targets. I personally feel first-child is a mis-leading name.
Related
I was finishing up selectors and testing my knowledge and encountered a problem that makes no sense.
In theory, the code below should color all first children that are li red, yet, a first and second child are being colored red.
Why is the second child colored red here?
li:first-child{
color: red;
}
<ul>
<li>Peter
<ol>
<li>Juan</li>
<li>Samuel</li>
</ol>
</li>
<li>John
<ol>
<li>Patrick</li>
<li>Spongebob</li>
</ol>
</li>
<li>Sara
<ol>
<li>Jonathan</li>
<li>Kragie</li>
</ol>
</li>
</ul>
color is inherited from the parent element....in this case the li:first-child
So when you tell the li to be a red color this is inherited by all its children.
You have no rule to override this for the children so they are colored by inheritance/
It happens because the color is inherited from the parent element, try to add this to your CSS to override it:
li {
color:initial;
}
This is because you have nested lis.
The second inner li is being coloured red because it's inheriting that rule from the style applied to the first child outer li, ie its parent.
li:first-child { color: red; }
li:not(:first-child) { color: black; }
That will override the inheritance and result in the text of the first outer and inner lis being red. Fiddle
Alternatively, if you want to colour only the inner lis:
li li:first-child { color: red; }
The li:first-child selector will also select the first li element in your parent list. You can target your selector using direct descendents or you can use classes.
Option 1: class selector on parent list
This is the preferred option as it will automatically namespace your css. All your selectors will start with .menu when targeting child elements.
<ul class="menu">
<li>Peter<ol>
<li>Juan</li>
<li>Samuel</li>
</ol></li>
</ul>
.menu ol li:first-child{
color: red;
}
If you want to override the style of a menu, you can use an extra class on the menu element and for example target it with the following selector. .menu.horizontal
Option 2: class selector on list item
This option has the same benefits of the first option, but now .menuItem is namespaced on its own.
<ul>
<li class="menuItem">Peter<ol>
<li>Juan</li>
<li>Samuel</li>
</ol></li>
</ul>
.menuItem ol li:first-child{
color: red;
}
Option 3: direct descendent selector
ol>li:first-child{
color: red;
}
It is always better to use classes because if you use ol elements in other places, the selector would still apply there.
I have to apply CSS for the following list:
<div id="divul">
<ul>
<li group="opt1">Wake up</li>
<li>Go to sleep</li>
</ul>
</div>
How to get the li with from group "opt1" in CSS?
Thanks!
You can use the attr-selector
li[group=opt1] {
color: red;
}
http://jsfiddle.net/Su7nD/
Use the selector li[group="opt1"], taking advantage of the CSS attribute-equals selector.
References:
CSS attribute selectors.
Demo
CSS attribute selector li[group="opt1"]
css
#divul > ul > li[group="opt1"] {
color: Green;
}
You have to use following:
#divul ul > li[group="opt1"] {
/* style you want to apply */
}
fiddle
Take a look also here:
custom attributes selectors css
the :first-of-type css selector finds all occurrences that is the first of it's type within a group of siblings. Therefore in this case:
HTML
<div id="aaa">
<p>Blaha</p>
<header><p>Mooxa</p></header>
</div>
CSS
#aaa p:first-of-type { color:red; }
both p tags will be colored red.
Does anybody know how to make only the very first p tag inside div#aaa, the one with "Blaha" in it color red?
Ps. I can't add any classes or ids Ds.
Here is a jsfiddle: http://jsfiddle.net/hz5Qe/
Use > symbol which refers only direct child elements.
#aaa > p:first-of-type { color:red; }
DEMO
For example, I have HTML like :
<div class='page'>
<span>2</span>
<span>2</span>
<a>1</a>
<a>6</a>
</div>
How can I style for first child a
I used like this : .page a:first-child {color:red}
but it doesn't run.
Use first-of-type instead of first-child
.page a:first-of-type{
color:red;
}
The :first-of-type CSS pseudo-class represents the first sibling of its type in the list of children of its parent element.
Taken from MDN Documentation. You can find more details & examples here.
Explanation : :first-child not working as expected
As Pranav c said, you can use
.page a:first-of-type { ... } or .page a:nth-of-type(1) { ... } but neither of them will work in IE8
So if we can assume that the <span> is always going to be there, then
.page span+a { ... }
will ensure that only the first a after the span will be styled and this is as good as you can get cross-browser right now.
Example: FIDDLE
For the given example:
<div class="menu">
<div class="menu_top">Menu1<div class="sub_menu">SubMenu1</div></div>
<div class="menu_top">Menu2<div class="sub_menu">SubMenu2</div></div>
<div class="menu_top">Menu3<div class="sub_menu">SubMenu3</div></div>
</div>
How can I change the display property for the respective childs elements?
I was trying the solution:
.menu_top .sub_menu{
display: none;
}
.menu_top:hover div.sub_menu{
display: block;
}
But all the "sub_menu" are shown when the mouse is over any "menu_top".
You want to display the .sub_menu when hovering over .menu_top?
.menu .menu_top:hover .sub_menu {
display: block;
}
The selector should be .menu_top:hover if you only want to display the respective child .sub_menu on hover.
See it in action - http://jsfiddle.net/spBJH/
You just need a minor change i think.
You have .menu:hover instead of .menu_top:hover
try this instead:
.menu .sub_menu{
display: none;
}
.menu_top:hover div.sub_menu{
display: block;
}
Try:
.menu_top:hover div.sub_menu {
display:block;
}
5.6 Child selectors
A child selector matches when an element is the child of some element. A child selector is made up of two or more selectors separated by ">".
The following rule sets the style of all P elements that are children of BODY:
body > P { line-height: 1.3 }
The following example combines descendant selectors and child selectors:
div ol>li p
It matches a P element that is a descendant of an LI; the LI element must be the child of an OL element; the OL element must be a descendant of a DIV. Notice that the optional white space around the ">" combinator has been left out.
You've got them switched.
.menu:hover = { do something when I hover over .menu }
I think what you want is:
.sub_menu:hover { this }