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
Related
I have the following HTML line:
<div data-component-id="12345" class="component" data-component-status="operational">
Is it possible to use the data-component-id as a CSS Selector?
I would like to add a CSS code especially for this div, eg: {display: none}
You can use the Attribute selector [] for this
div[data-component-id="12345"] {
background-color: red;
}
<div data-component-id="12345" class="component" data-component-status="operational">
Demo
</div>
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.
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.
I do not understand the meaning of the element selector ">". I thought it would style only direct children, but is does not.
HTML
<div class="infos">
<ul>
<li> marmelade</li>
<li> schokolade</li>
<li> softeis</li>
<li> mandeln</li>
<li>
<ul>
<li> marmelade</li>
<li> schokolade</li>
<li> softeis</li>
<li> mandeln</li>
</ul>
</li>
</ul>
</div>
CSS
body {
color: #0bdede;
}
.infos > ul {
color: red;
}
Why are both <ul>s in red? js fiddle
Edit: Ah. Note that the color property is inherited. If you make an element red, all its descendants will be red unless they’re set to another colour.
So, to edit your example CSS to get your desired effect:
.infos ul {
color: #0bdede;
}
.infos > ul {
color: red;
}
http://jsfiddle.net/wrsHt/2/
I thought it would style only direct children, but is does not.
It does. For example:
CSS
.classname ul { color: green; }
.classname > ul { color: red; }
HTML
<div class="classname">
<ul>
<li>Direct child list: red</li>
</ul>
<div>
<ul>
<li>Descendant list, not direct child: green</li>
</ul>
</div>
</div>
http://jsfiddle.net/9YkDx/
However, two things to note about your example code:
Although classname > ul looks more specific than classname ul, it’s not, so your second rule will override your first (although because both rules have the same effect, it’s difficult to tell.
Although you probably know this, to actually select a class name, you want .classname, not classname.
classname > ul - select first level ul children of classname
classname ul - select all ul children of classname
I am currently having trouble with wrapping my head around the idea of class and id selectors. Posted below is my current markup for my navigation. What I am trying to achieve in my css stylesheet is the horizontal menu.
Why can I not target .navigation-menu to style everything within this class (.navigation-main)?
<nav class="navigation-main">
<ul class="menu">
<li class"home">Home</li>
<li class"submit">Submit a Pic</li>
<li class"advertise">Advertise</li>
<li class"contact">Contact</li>
</ul>
</nav>
CSS
.navigation {
display:inline;
}
You are not targeting the elements:
.navigation-main li{
display:inline;
}
You're looking for this:
.menu li {display:inline;}
according to the question its because you apply the css on the class navigation which is not used you need to include this class to apply the css
try
.navigation-main li {
display:inline;
}
It seems like you might be confused about how CSS selectors work. A class needs the same name as it's definition to actually match.
HTML
<div class="my-class"></div>
CSS
.my-class
{
...
}
So, to answer your question (as it is currently), why you can not target .navigation-menu to style everything within .navigation-main. It is because your CSS class .navigation does not match any classes in your current HTML
To style your NAV with class="navigation-main":
CSS
.navigation-main
{
...
}
To style only a UL with class="menu" that is inside a NAV with class="navigation-main":
CSS
.navigation-main .menu
{
...
}
To style all the elements within NAV class="navigation-main"
CSS
.navigation-main *
{
display:inline;
}