I have this div:
<div dir="ltr"></div>
That is generated automatically via imap_ function, and therefore I am not able to assign any style to it with the style="" tag.
My question is, how can I assign styles to the div above?
An attribute selector works well if you just want to style this specific element:
div[dir="ltr"] {
/* Styles */
}
Have you tried to use CSS for this?
div {
color: #cecece; /* change the color */
}
http://jsfiddle.net/afzaal_ahmad_zeeshan/wxft9/
[dir='ltr'] {
color: #cecece;
}
or with div - div[dir='ltr']
http://jsfiddle.net/aLvZk/
Try this:
CSS:
div[dir='ltr']
{
/*Styles*/
}
Fiddle
Related
First time here, and was hoping that someone would be able to help with an issue I’ve been dealing with. I’ve had specific details not to modify the original CSS, and instead told to create a new CSS that contains specific overrides for the original CSS. How would I go about doing that efficiently?
Any help would be appreciated. Thanks!
css are applied is a given order. Here are few examples
Case 1: overide default color for a div
div#foo {
color: blue; /* This one is applied to <div id="foo"></div> */
}
div {
color: red;
}
Case 2: css which is loaded at last will be on top.
div {
color: red;
}
div {
color: blue; /* This one is applied to <div id="foo"></div> */
}
case 3: important takes first place
div {
color: red !important;
}
case 4: multiple important
div {
color: red !important;
}
div {
color: yellow !important; /* This will be applied */
}
Include your css file after original css file. Add your custom class in html and use it to override original code.
Don't use !important property it create issue in responsive style.
I have defined this hover for div element
div.MyCSSClass:hover
{
background-color: purple;
}
This is my HTML source:
<div class="
<ul class="MyParentCSSClass">
<li>
<div>
<div>
<div class="MyCSSClass">
<!-- I want to remove CSS hover for this div element -->
I want to remove the hover when the div.MyCSSClass is a child of MyParentCSSClass, So I add this to remove the hover style in CSS:
.MyParentCSSClass div.MyCSSClass:hover
{
}
But it did not work. I still see the same hover style.
Is there a way to remove hover in CSS without me creating a new CSS class for my div tag? I want to keep the same name as I have other CSS property uses the 'MyCSSClass'.
Thanks for the suggestion. I tried
background-color: none !important;
But when I look into chrome, that CSS is being over-written by
.MyGrandParentClass div.MyCSSClass:hover
{
background-color: purple;
}
and the html source is
<div class="MyGrandParent">
<ul class="MyParentCSSClass">
<li>
<div>
<div>
<div class="MyCSSClass">
<!-- I want to remove CSS hover for this div element -->
My question is how my 'Remove hover' css rule is being over-written? I have put "!important" to my rule.
.MyParentCSSClass div.MyCSSClass:hover {
background-color: none;
}
This will overwrite the background color given by div.MyCSSClass:hover. if you are keeping MyParentCSSClass div.MyCSSClass:hover empty as MyParentCSSClass div.MyCSSClass:hover {}, it will not overwrite anything or doing nothing actually.
You need to re-write all the previously added styles to the hover event. In the case you specified, please do the following:
.MyParentCSSClass div.MyCSSClass:hover
{
background-color: none;
}
Background-color : none; is not w3c standard. It will work on some browser but according to w3c standard it's not right way.
So try to use background-color: transparent which will work good on all browsers and w3c can validate your code.
Have fun.
I search for all solutions but nothing help me.
my simple problem is to set a style for a link ( a Tag ) with a class:
<a class="logo"></a>
I don't want a general style for links or for active ones but for a selected Class.
Thank you.
I think you're looking for the CSS class selector.
To apply a style to just a single class you should prefix the class name with a dot (.) in your CSS selector.
In this particular case you would do it like this:
.logo {
/* Styles here */
}
You can also ensure that only link elements are affected by adding the element selector:
a.logo {
/* Styles here */
}
PS. The CSS id selector is # and it works in a similar manner.
There are three different ways to solute this. Since you do not want a global styling for a link this example will not be it:
a{
/* STYLE HERE */
}
Since you simply want to style a link with a surtain class use this example:
a.logo {
/* STYLE HERE */
}
or
logo {
/* STYLE HERE */
}
or
a[class="logo"] {
/* STYLE HERE */
}
The last example is a new way of making this happen, some very old browser wont understand this, so you better stick to the first or second example.
Use like this
<style>
a[class="logo"] {
background-color: yellow;
}
</style>
<a class="logo">test</a>
you can add style rules by targeting class :
a.logo { color: #aeaeae; }
Example HTML:
<div itemid="MenuContainer" id="MenuContainer" class="MenuContainer">
Example CSS:
#MenuContainer {
/* Styles */
}
How can I use CSS to target ItemID instead of the regular ID?
Instead of #MenuContainer, use this.
[itemid="MenuContainer"] { /*CSS STYLES*/ }
This will use data attribute (itemid) and the value (MenuContainer) from the HTML tag.
see this http://jsfiddle.net/442hdc0p/
You should not even try to do that.
Instead, use unique class for this element.
In your example you could add class="MenuContainer extraClass" and then in CSS use .extraClass { color: #FFF; } or whatever to define, what you need.
Here is my code.
<div class="start">start</div>
<div>middle-1</div>
<div>middle-2</div>
<div>middle-3</div>
...................
...................
<div>middle-n</div>
<div class="end">end</div>
I want to apply css to all div's when mouse hover the first div with class start.
With the current HTML structure you can use couple of sibling selectors for this.
.start:hover ~ div {
color: red; /* styles you want to apply */
}
/* reset styles back for all other divs after .end */
.start:hover ~ .end ~ div {
color: inherit;
}
Demo: http://jsfiddle.net/3c6V6/1/
However I would recommend to change HTML structure if you can. For example:
<div class="start">start</div>
<div class="middles">
<div>middle-1</div>
<div>middle-2</div>
<div>middle-3</div>
<div>middle-n</div>
<div class="end">end</div>
</div>
<div>after-1</div>
<div>after-2</div>
and CSS:
.start:hover + .middles > div {
color: red;
}
You would just have much more flexibility.
Demo: http://jsfiddle.net/3c6V6/2/
Could it be as simple as putting a parent container around it, and putting the hover on that, or do you wish to single out some of the siblings directly?
In this case, try putting :hover on the parent container like this:
.parent:hover div {/*style*/}
This is for your second version found in the comments: JSFiddle DEMO
div.start:hover~div.middles div:not(.end) {
font-weight: bold;
}
(This is for your original question):
div.start:hover~div:not(.end) {
font-weight: bold;
}
JSFiddle DEMO
This is where I found the information to do it. Didn't know there were so many CSS selectors.