Whats wrong with my code below.my code below doesn't work fine
<ul>
<li><font-color ="Red"/> Text 1</li>
</ul>
Font-color isn't a valid HTML tag or style declaration. Syntactically, it's illegal.
Instead, it should be something like: <li style="color:red">foo</li>
However, it is almost always better to move styles into their own stylesheet, and use a class name instead:
HTML
<li class="my-class">foo</li>
CSS
.my-class { color: red; }
As #JanDvorak noted, try to use descriptive names for classes like "highlight".
You can also use other selectors to style your elements, such as an ID selector:
HTML
<li id="item1">foo</li>
CSS
#item1 { color: red; }
It should be:
<ul>
<li style="color: Red;"> Text1</li>
</ul>
Font is not a self closing tag. Also it's deprecated so you should look at changing that if possible. It should look like this:
<ul>
<li style='color:red'> Text 1</li>
</ul>
Related
Is it possible to use wildcard to select data attribute by name with CSS only?
[data-widget-type="*.color"] {
color: orange
}
<ul>
<li>asdasd</li>
<li data-widget-type="red.color">asdasd</li>
<li data-widget-type="none.color">asdasd</li>
</ul>
http://jsfiddle.net/
Yes, it's possible, just not quite the way you've done it. You need to move the delimiter (in your case, the "wildcard" asterisk) outside of your string declaration. There's also a better delimiter for what it looks like you're trying to select. Here's the right attr selector:
li[data-widget-type$="color"] {
color: orange;
}
<ul>
<li>asdasd</li>
<li data-widget-type="red.color">asdasd</li>
<li data-widget-type="none.color">asdasd</li>
</ul>
This will select all the li elements with data-widget-type values that end in color, and change their color to orange.
Here's a JSFiddle demo to play around with it yourself.
[data-widget-type*="color"] {
color: red;
}
<ul>
<li>asdasd</li>
<li data-widget-type="red.color">asdasd</li>
<li data-widget-type="none.color">asdasd</li>
</ul>
More info about Attribute selectors - https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors
li[data-widget-type$=".color"] {
color: orange;
}
<ul>
<li>asdasd</li>
<li data-widget-type="red.color">asdasd</li>
<li data-widget-type="none.color">asdasd</li>
</ul>
You can use css selectors for that too.
For specific atribute you can use [] and if you are comparing something in css and want to search at the beginning ^= or if you want to find it at the end $= you can use this.
Also if you don't know where the word is in the comparing word then you can use wildcard * too. So in our case it is li[data-widget-type*=".col"]
As an advice, I like to struct my css files like this.
I always have a css class for colors.
li[class*="red"] {
color: red;
}
So I can also reach it from any other class like any-red, new-red when I don't want to use single red class.
Also don't forget that you can also use li[data-widget-type|="red"] for elements that starting with red. This is an old but good move from CSS2, some browsers may reject it so take care.
So here is the jsFiddle and here is the snippet.
li[data-widget-type$=".color"] {
color: orange;
}
<ul>
<li>asdasd</li>
<li data-widget-type="red.color">asdasd</li>
<li data-widget-type="none.color">asdasd</li>
</ul>
Given the following html:
<ul class="nav">
<li class="level0">..</li>
<li class="level0">..</li>
<li class="level0 active">
Category Name
<ul class="level0">
<li class="level1 active">
Sub-category
<ul class="level1">
<li class="level2 active">
I only want this link styled
</li>
</ul>
</li>
</ul>
</li>
<li class="level0">..</li>
</ul>
How do I only style that nested link, considering that each parent li also has a class of 'active'? I thought I could use .nav .active:last-child > a which works in the above example, but removing the active class from that li.level2 you would expect then that the li.level1 above it would be styled, but it is not (see jsfiddle below for an example of this).
I may just be having a brainfart but I can't think of a way to target that element with only css. The only thing I can think of is to use javascript to remove the 'active' class from the parent elements, but I feel like there must be some other way.
Here is a more elaborate jsfiddle example that illustrates two test cases: http://jsfiddle.net/K4e37/
Is this possible without changing the markup and without using javascript?
Edit: I wasn't thinking about last-child correctly but here is an updated example which gets pretty close to what I want, just need to not style the higher level elements: http://jsfiddle.net/K4e37/2/
Based on other answers (here, here), the answer to your question is no. As summarized there, "last-of-type" does not work with classes and "last-child" does not work with the sub-nesting structure in your HTML. I think you'll have to change the markup or use Javascript.
List item
If you don't even have the 'level' classes, still you can target your specific html link with the below selector( if you only needs that specific link to be styled ). Please link if your requirement fulfills!
Usiong CSS:
ul.nav li ul li ul li.active a {
color: #FF0000;
}
Cheers :)
I am working on this demo. How can I apply different style to my nested list (>Nested 1. and >Nested 2) rather than its parent list?
<div>
<ul>
<li>Zurich</li>
<li>Geneva
<ul>
<li>Nested 1</li>
<li>Nested 2</li>
</ul>
</li>
<li>Winterthur</li>
<li>Lausanne</li>
<li>Lucerne</li>
</ul>
</div>
You can use li li a to select those elements. For example:
li li a {
color:red;
}
jsFiddle example
I would achieve this through classes added to the <ul> elements, then use the appropriate css selector to apply the style.
Add the class to the <ul> tag you want to style.
<div>
<ul>
<li>Zurich</li>
<li>Geneva
<ul class="styledList">
<li>Nested 1</li>
<li>Nested 2</li>
</ul>
</li>
<li>Winterthur</li>
<li>Lausanne</li>
<li>Lucerne</li>
</ul>
</div>
Then, in the css sheet, apply styling to that class name, or just to the <li> elements within that list, whatever is appropriate.
Apply to <ul> and all decendants
.styledList {
// css style
}
Apply only to <li> inside the <ul>
.styledList li {
// css style
}
The . in the selector is used to specify that the style is applied to the elements with that class, or you can use the # selector to specify an ID that you want the style applied to, such as
<div id="styledDiv">Hello</div>
css
#styledDiv {
border: 1px solid black;
}
If you want to learn more about CSS selectors, you can check out the W3 article
http://www.w3.org/TR/CSS2/selector.html
and here is the class selectors in particular
http://www.w3.org/TR/CSS2/selector.html#class-html
Situation, such a menu:
<ul class="top_right_menu">
<li class="top_right_submenu"><i class="fa fa-globe"></i> LANGUAGES</li>
<li>HELP</li>
<li>LOGIN</li>
</ul>
When I hover "LANGUAGES" I need to show up the other :
<ul class="hover_top_right_menu">
<li>ENGLISH</li>
<li>SPANISH</li>
<li>RUSSIAN</li>
<li>GERMAN</li>
</ul>
Necessary to make it work on CSS, JQuery or without JavaScript. Here's a version does not work:
.hover_top_right_menu {
display: none;
}
It's a wrong line
.top_right_submenu: hover, hover_top_right_menu {
display: visible;
}
You have some typos in your css
by default the element .hover_top_right_menu should have display: none. When you hover the submenu then you change its display (with display: block).
.hover_top_right_menu {
display: none;
}
.top_right_submenu:hover .hover_top_right_menu {
display: block;
}
Anyway this css is based on the assumption that the language list is nested into .hover_top_right_menu element, e.g.:
<ul class="top_right_menu">
<li class="top_right_submenu"><i class="fa fa-globe"></i> LANGUAGES
<ul class="hover_top_right_menu">
<li>ENGLISH</li>
<li>SPANISH</li>
<li>RUSSIAN</li>
<li>GERMAN</li>
</ul>
</li>
<li>HELP</li>
<li>LOGIN</li>
</ul>
As a side notes:
Unless you need to have an action on click event, the link around "LANGUAGES" is not necessary for the example
you're using empty markup, probably for styling purpose only. If you need to have an icon just place it as a background of that list-item (or as content property of its :before pseudoelement)
I have an auto generated Wordpress menu that's created the following:
<li class="page_item page-item-23 page_item_has_children">
Main item 1
<ul class="children">
<li class="page_item page-item-52498 current_page_item">
Item 1
</li>
<li class="page_item page-item-52496">
Item 2
</li>
<li class="page_item page-item-52477">
Item 3
</li>
</ul>
</li>
I want to say when I'm on the first sub item, highlight the main li.
This is the CSS I'm using (ideally this would be more simple but due to the nature of the auto generated menu it's a bit messy!):
.page-item-52498.current_page_item li.page-item-23 a {
color:white!important;
font-family:'Museo Sans W01 500'!important;
}
At the moment this doesn't make the first li a white.
That CSS selector doesn't work. You cannot select the .page-item-23 as a child of .page-item-52498, as it is a container for the other in the markup structure.
Have you tried outputting the page ID using the body_class function of WordPress? Then you could try using a selector such as body.page-id-52498 li.page-item-23 a or similar.
The body_class function is used as such (most probably in the header.php template file of WordPress):
<!-- <head> somewhere above -->
<body <?php body_class(); ?>>
<!-- rest of the template somewhere below -->
It should output something similar to this (with a dynamic ID number of course):
<body class="page page-id-112 page-template logged-in admin-bar">
Whenever you've used body_class and it outputs the specific page ID you've declared in the CSS selector I wrote above it will take effect (following standard cascading rules of course).
One for the future - the subject selector should be arriving in CSS4. It's going to be very powerful but easy to abuse I think.
Syntax
!subject > selector {
/* declarations */
}
Example
!ul > li {
border: 1px solid green;
}
Scrolling down to the Parent Selector: http://coding.smashingmagazine.com/2013/01/21/sneak-peek-future-selectors-level-4/
And http://css4-selectors.com/selector/css4/subject-of-selector-with-child-combinator/