Consider these lines of codes:
<dd class="flt-block-content ">
<ol>
<li style="width: 50%;">
abc
<span class="count-wrapper">(6)</span>
</li>
<li style="width: 50%;">
def
<span class="count-wrapper">(16)</span>
</li>
</ol>
</dd>
How Can I override the width property of all the li tags that resides in the class named flt-block-content with my custom value?
Second Q: Is the use of !important necessary for overriding?
If you have an inline style and want to override it, you'll need to use !important to do so.
.fit-block-content li {
width: 100% !important;
}
First of all, you are using inlinestyles which have specificity greater than id, class or element. So they would override styles from all 3 of these. So in order to have a default width and then override, you can create a class default and assign width:50% and a class override and assign the override styles
li.default {
width:50%
}
li.override {
//Override styles
}
For your second question on ! important, it's never a good practice to use ! important unless required in very specific scenarios
Related
Im trying to get my hover selecting work properly.
Im having two classes in a li element.
It may have the class named disabled , or it may have a class called wait , or it may have both disabled and wait
I want this hover to only work on the li element with the class named wait, but only if disabled class is not on it.
How can i achieve this?
Current attempt:
.group li:.wait:not(.disabled):hover {
// do something
}
You had a : after your li, which signified that the following element in your query would be a pseudo-class. However, you just wanted a simple class selector: .wait.
.group li.wait:not(.disabled):hover {
color: red;
}
<ul class="group">
<li>None</li>
<li class="wait">Wait</li>
<li class="disabled">Disabled</li>
<li class="wait disabled">Wait and Disabled</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>
I've got the following HTML code. My CSS for tax-details is:
.products-grid .tax-details {
margin-top: -15px;
}
I need to have a seperate css selector for tax-details that have the class regular-price. I tried the following:
.products-grid .regular-price .tax-details {
margin-top: 0px;
}
but this does not work. Can somebody help me out?
<ul class="products-grid first odd">
<li class="item first"> <a class="product-image" title="Navy Frotteejacke" href="urll"><img width="180" height="180" alt="Navy Frotteejacke" src="url"></a>
<h2 class="product-name"><a title="Navy Frotteejacke" href="url">Navy Frotteejacke</a></h2>
<div class="price-box">
<span id="product-price-167" class="regular-price">
<span class="price">9,00 €</span></span>
</div>
<span class="tax-details">inkl. MwSt., zzgl. Versandkosten</span>
</li>
</ul>
If I understand correctly you are trying to change the CSS of .tax-details but it is not a child of .regular-price so that won't work.
Have you tried adding !important; behind your CSS like this:
.tax-details {
margin-top: 0px!important;
}
Or if you are trying to control two classes with one code (like your title suggests) you can use this:
.regular-price, .tax-details {
margin-top: 0px;
}
for tax-details that have the class regular-price
=> tax-details hasn't a regular-price class associated to it in your HTML sample.
The selector: .products-grid .regular-price .tax-details
applies to a structure like this:
products-grid
regular-price
tax-details
BUT
Your current HTML has this structure:
products-grid
regular-price
tax-details //not a regular-price's child
So don't expect it to work that way.
Refine the structure to match the CSS declaration, or change the CSS selector.
---------From your comment just below:----------
You could perhaps not changed the whole structure, but adding a class I hope yes:
<span class="tax-details regular-price">inkl. MwSt., zzgl. Versandkosten</span>
and the CSS becoming:
.products-grid .tax-details.regular-price { //note the union (without space) between tax and regular
margin-top: 0px;
}
For more info on this: http://www.bennadel.com/blog/680-Defining-A-CSS-Selector-That-Requires-A-Multi-Class-Union.htm
I have been trying to figure this one out, but can't seem to get it right, perhaps I'm way off with my thoughts, but this is it.
I have no control over the UL class names, they are what they are. I can only change the class name of the , the code is as below:-
<div class="custom-parent-div-name-changeable">
<div class="custom-child-div-name-changeable">
<div class="cant-change-this">
<ul class="name-cant-be-changed">
<li>first item</li>
<li>second item</li>
<li>third item</li>
</ul>
</div>
</div>
</div>
The problem I have is the "name-cant-be-changed" class for the UL has a background and border set. I need to remove the background and border in another stylesheet, using the !important selector due to limitations in the software used to power the website.
The major setback is this same class ("name-cant-be-changed") is used twice on the page. so I need to create CSS for the "name-cant-be-changed" which is inside "cant-change-this" div class. Both instances of "name-cant-be-changed" are within a div with class "cant-change-this", but have different parent class names, eg. "any-old-name", like so:-
<div class="parent-div">
<div class="any-old-name">
<div class="cant-change-this">
<ul class="name-cant-be-changed">
<li>apple</li>
<li>orange</li>
<li>banana</li>
</ul>
</div>
</div>
</div>
How can I create separate CSS for the UL class "name-cant-be-changed" which is rendered based on the parent in which both reside?
I tried using the following, with various combinations of the class names to no avail:-
.custom-child-div-name-changeable > .name-cant-be-changed {
background: none !important;
border: none !important;
}
Can anybody shed some light on this? Thanks in advance!
The > operator means "direct child of preceding selector". I think you want something like this:
.custom-child-div-name-changeable .name-cant-be-changed {
background: none !important;
border: none !important;
}
or
.custom-child-div-name-changeable > div .name-cant-be-changed {
background: none !important;
border: none !important;
}
or
.custom-child-div-name-changeable > div.cant-change-this .name-cant-be-changed {
background: none !important;
border: none !important;
}
Either:
.any-old-name .name-cant-be-changed {…}
or
.any-old-name > .cant-change-this > .name-cant-be-changed {…}
The first reads: all elements with '.name-cant-be-changed' who have a parent somewhere with class .any-old-name.
The second reads: all elements with .name-cant-be-changed with an immediate parent of .cant-change-this that has an immediate parent of .any-old-name
If a ul has li items with multiple classes, is it possible to get the last item of a specific class using :last-child?
For example, consider following:
<ul class="test">
<li class="one">
<li class="one">
<li class="one">
<li class="two">
<li class="two">
</ul>
I want to add some style to the last li having class "one" (ie. third in the list).
I tried following and it does not work.
ul.test li.one:last-child
That's not possible yet.
:last-child selects the last child, regardless of the tag name, etc.
The possible alternative, :last-of-type selects the last occurrence of a tag. It ignores the class name, etc.
Your only option is to add a specific class name to that element, or use JavaScript to add this class name.
Instead of giving class for each li, you can go for nth child where you can assign the style by li number.
If you want to give the separate css for your 3rd li then you need to write
li:nth-child(3) {
color: green;
}
You can do it using jquery: http://jsfiddle.net/surendraVsingh/HyAhL/2/
Jquery code:
var n = $('.one').length;
$('.one').eq(n-1).css('color', 'red');