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>
Related
I am trying to alter MediaWiki's hideous default color for visited links and keep the red color for new links. New links have class new or their parents have this class set. So I tried
:not(.new) a:not(.new) { color: #0074D9 !important; }
But as I inspected in the browser console, this rule overwrites li.new a - which it should not. Experimenting a bit,
li:not(.new) a:not(.new) keeps the red color for li.new a,
*:not(.new) a:not(.new) overwrites the red color
Can you explain this behavior and recommend a CSS rule forcing blue color for all links but the new ones?
:not(.new) will match every element that does not have a new class. So for example :not(.new) a in <li class="new"><span><a>...</a></span></li> will match span a. In general, :not() is rather hazardous to use without an accompanying specific class or id that you know won't be used elsewhere.
What you want is "a tags which do not have a .new ancestor" (as opposed to "a tags which have a non-.new ancestor"), which cannot be expressed as a CSS selector. Given you know that the .new element is the grandparent, you might be able to write something like :not(.new) > * > a instead.
set a color for li.new a and li a.new and then set a color for li:not(.new) a and li a:not(.new) .
If you want just the visited links to change color add :visited to the css selectors
ul li.new a, ul li a.new {
color:red
}
li:not(.new) a {
color:green
}
a:not(.new) {
color:green
}
<ul>
<li>
<a href="#" >Normal Link</a>
</li>
<li class='new'>
this will NOT be green because LI has class new
</li>
<li>
<a href="#" class='new'>this will NOT be green because it has class new</a>
</li>
<li>
<a href="#" >Normal Link</a>
</li>
</ul>
Recently when I started to use my own implementation of methodology based on BEM I stuck on modifiers for nested elements.
I want to change link color to red when product-desc-name has class mark.
The following example presents the problem.
What should I do to keep the final style the same but without duplicating class names?
.product-desc {
&-name {
&.mark {
/* this section is ugly */
.product-desc-link {
color: red;
}
}
}
}
<ul class="product-desc">
<li class="product-desc-name">
<a class="product-desc-link">Param1</a>
</li>
<li class="product-desc-name mark"> <!--add class .mark-->
<a class="product-desc-link">Param1</a>
</li>
</ul>
This is a typical weakness of BEM. I have search for long, but do not seen any good solution for this so I make my own.
At first I would change the class name. Because UL element should be call 'product-desc-list'. The LI element 'product-desc', as this is in fact exactly a product description for a product.
The more important is the condition of the product. Therefore the selection of the element should be mentioned first. This allows several blocks to be used for one component.
The first is the component definition. The next define possible states like selected, in progress etc.
Here is an example for illustration
// your product in default definition.
.product-desc {
&--link {
text-decoration: underline;
}
}
// your product in mark state definition
.mark {
.product-description {
&.--link{
font-weight: bold;
}
}
}
<ul class="product-desc-list">
<li class="product-desc">
<a class="product-desc--link">Param1</a>
</li>
<li class="product-desc mark"> <!--add class .mark-->
<a class="product-desc--link">Param1</a>
</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 :)
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>
I have an ul with 7 li inside of it. I know that I can style the first and last li but is it possible to style the last 3 li's so the text is a different colour? This is the first time I have come across this problem/dilemma. I have googled around a bit and have not found much that is really helping me.
<div class="international-portfolio">
<div class="international-portfolio-title"> Sales Representation International</div>
<ul class="nobullet inline int-portfolio ">
<li class="excelsior-hotel-ernst first">
<li class="le-mas-candille">
<li class="mandarin-oriental-hotel-group-worldwide">
<li class="victoria-jungfrau-grand-hotel-spa">
<li class="palace-luzern">
<li class="eden-au-lac">
<li class="bellevue-palace last">
</ul>
</div>
ive updated the coding - trying the solutions given but not working at the moment but will keep at it.
This should do the trick (but mind you, it won't work in older versions of IE):
http://reference.sitepoint.com/css/pseudoclass-nthlastchild
Use the css selector as follows:
li:nth-last-child(-n+3) {
/*stuff here*/
}
Here's an example, too:
http://jsfiddle.net/yAUwb/
You can use:
li:nth-last-child(1), li:nth-last-child(2), li:nth-last-child(3) {
color: red;
}
It is kinda of possible with this code
.myList li:nth-last-child(1),
.myList li:nth-last-child(2),
.myList li:nth-last-child(3)
{
color: red;
}
Demo: http://jsfiddle.net/2np58/