I have an HTML div tag as belows:
<div id="cookiemsgbox" class="blue" style="display: block;">
This consists of few links and span tags. All of them appear in blue color because of class=blue; property.
Now instead of putting it in the html tag I wish to use the class property in the css.
I have written it as belows:
#cookiemsgbox {
class: blue; }
Also tried :
#cookiemsgbox {
class: #364395; }
But this does not works.
The links and span elemnets appear gray(colorless).
Where am I going wrong ?
Please help.
Thanks :)
In your CSS use color: blue;. To understand CSS selectors refer https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors
#cookiemsgbox
{
color: blue;
}
Explaination:
# selects id attribute
. selects class attribute.
#cookiemsgbox selects the element with id="cookiemsgbox".
.blue selects all elements with class="blue"
try this
.blue
{
color : blue;
}
OR
#cookiemsgbox
{
color : blue;
}
Related
How to apply css to element having same class name.i want apply css to both how can I do this?
I try many times but don't get it right way.
<div class="a">...</div>
<span class="a">..</span>
I am writing my css inside HTML itself inside <script> tag
try this in your css file
.a{
// css that u want to apply
}
When targeting classes in CSS you must do it as follows:
.a {
color: red
}
<a class="a" href="#">This is a link</a>
<div class="a">This is a div</div>
<span class="a">This is a span</span>
This will target all elements with this class a, as shown.
div.a {
color: red;
}
span.a {
color: blue;
}
by this you can apply different css to elements having same class.
To apply same CSS to all elements try this.
.a {
color: red;
}
I'm a CSS beginner trying to customise my WordPress blog by using a custom.css file.
I'd like to change the color of a div but this div have several classes :
<div class="container template-blog template-single-blog ">
If I use the following code will it change the background of all the divs with at least one of these classes or only the div with at least these 3 classes ?
.container .template-blog .template-single-blog {
background-color: lightgreen;
}
If you have a several classes associated to an element e.g. the <div>, those classes will target that div element only.
However, if your <div> classes are being used anywhere else, it will however, change the background-color to lime green.
If you want one class to target one element and your not going to be using it anywhere, then maybe consider ids (#unique).
If you want to target that one element then consider doing the following:
.container.template-blog.template-single-blog {
background-color: lightgreen;
}
Examples of usage: http://jsfiddle.net/kjLfq8b4/
div {
margin-bottom: 40px;
}
#uniqueItem {
color: red;
border: 1px solid green;
}
.oneClass {
background-color: blue;
color: white;
}
.twoClass {
padding: 10px;
}
.threeclass {
text-decoration: underline;
}
.oneClass.twoClass.threeClass {
height: 40px;
}
<div id="uniqueItem">This is a unique Item</div>
<div class="oneClass">This is one class</div>
<div class="oneClass twoClass threeClass">This is multiple classes</div>
Remove the spaces between classes names:
.container.template-blog.template-single-blog {
background-color: lightgreen;
}
This will mean that this style will be applied only when an tag matches with all the three classes.
Your CSS selector is actually like this:
"class 'template-single-blog' which has an ancestor with class 'template-blog' which has an ancestor with class container"
The best option is to add a class to that div and make a CSS rule for that class:
.new-class {
background-color: lightgreen;
}
If adding a class isn't an option, you should try saying "a div that has all of those classes". It is written like this:
div.container.template-blog.template-single-blog {
background-color: lightgreen;
}
To change the colour of all any div with one of these class names, you will want to add commas between the class names, like this:
.container, .template-blog, .template-single-blog {
background-color: lightgreen;
}
Without the comma nothing will change.
Will change nothing. You have selected the template-single-blog class in a markup like this:
<div class="container">
<div class="template-blog">
<div class="template-single-blog">
</div>
</div>
</div>
Just change the background on one of the classes, will work if nothing overwrites it.
.template-single-blog {
background-color: lightgreen;
}
or better add a new class
.background-single-blog {
background-color: lightgreen;
}
With your given markup:
<div class="container template-blog template-single-blog ">
This style:
.container .template-blog .template-single-blog {
background-color: lightgreen;
}
Will not affect anything. What that style declaration says is:
"For all elements with the class container, that have a descendant element with the class template-blog that contain children with the class template-single-blog elements, change the background of the element with the class template-single-blog element.
You could change the background of your div simply with this:
.template-single-blog {
background-color: lightgreen;
}
Which will change all elements with the .template-single-blog class across the site, regardless if they have any other classes.
If you want to get more specific, you can do this:
.container.template-blog.template-single-blog {
background-color: lightgreen;
}
Which will change only those elements that have all three classes.
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
My understanding is that using element.class should allow for a specific element assigned to a class to receive different "styling" than the rest of the class. This is not a question about whether this should be used or not, but rather I'm trying to understand how this selector is intended to work. From looking at a ton of examples on the internet, I believe the syntax is correct and do not understand why this is not working.
Here is an example:
CSS:
h2 {
color: red;
}
.myClass {
color: green;
}
h2.myClass {
color: blue;
}
HTML:
<h2>This header should be RED to match the h2 element selector</h2>
<div class="myClass">
<h1>This header should be GREEN to match the class selector</h1>
<h2>This header should be BLUE to match the element.class selector</h2>
</div>
It should be this way:
h2.myClass looks for h2 with class myClass. But you actually want to apply style for h2 inside .myClass so you can use descendant selector .myClass h2.
h2 {
color: red;
}
.myClass {
color: green;
}
.myClass h2 {
color: blue;
}
Demo
This ref will give you some basic idea about the selectors and have a look at descendant selectors
h2.myClass refers to all h2 with class="myClass".
.myClass h2 refers to all h2 that are children of (i.e. nested in) elements with class="myClass".
If you want the h2 in your HTML to appear blue, change the CSS to the following:
.myClass h2 {
color: blue;
}
If you want to be able to reference that h2 by a class rather than its tag, you should leave the CSS as it is and give the h2 a class in the HTML:
<h2 class="myClass">This header should be BLUE to match the element.class selector</h2>
The element.class selector is for styling situations such as this:
<span class="large"> </span>
<p class="large"> </p>
.large {
font-size:150%; font-weight:bold;
}
p.large {
color:blue;
}
Both your span and p will be assigned the font-size and font-weight from .large, but the color blue will only be assigned to p.
As others have pointed out, what you're working with is descendant selectors.
h2.myClass is only valid for h2 elements which got the class myClass directly assigned.
Your want to note it like this:
.myClass h2
Which selects all children of myClass which have the tagname h2
The CSS :first-child selector allows you to target an element that is the first child element within its parent.
element:first-child { style_properties }
table:first-child { style_properties }
Suppose I have this HTML:
<div class="SomeClass">test</div>
<div class="SomeClass" id="SomeID">test</div>
<div class="SomeClass">test</div>
with this CSS
.SomeClass{color:blue;}
.SomeClass:hover{color:red}
I want the hover effect not to apply to the SomeID div. I can do this with jQuery but I was wondering if there's an easier way to do it with just CSS.
Thanks for your suggestions.
CSS is parsed in order, meaning that if after you define
.SomeClass:hover { color: red; }
You then define a rule
#SomeId.SomeClass:hover { color: blue; }
That should 'overwrite' the initial color: red;
Just assign another rule to the div with an id of SomeID. This will override the other rule.
.SomeClass{color:blue;}
.SomeClass:hover{color:red}
#SomeID:hover{color:blue}
jsFiddle example
Just overwrite the style:
#SomeID:hover {
color:blue;
}
Alternatively, you could use:
.SomeClass:not(#SomeID):hover {
color:red;
}
Then it is easier to change it, but less browser support.
Let's take a look at link pseudo-class specificity:
Remember: LAHV (:link, :active, :hover, :visited).
First, in order to cascade properly, let's assign the following to .SomeClass:
.SomeClass:link, .SomeClass:active, .SomeClass:visited { color: blue; }
.SomeClass:hover { color: red; }
Next, let's specify #SomeID:
#SomeID:hover { color: blue; }
id always takes precedence over class.