I have the following in my css file:
md-menu-content.md-menu-bar-menu.md-dense .md-menu > .md-button:after{
display:none;
}
And here's my HTML:
<md-menu-content class="ZZZ">
Hello
</md-menu-content>
I have some Javascript (material design) that adds lots of stuff to the <md-menu-content> elements.
I would like to apply the above CSS to certain <md-menu-content> elements (only if they have the ZZZ class) and leave all others behaving as normal. I'm very stuck. Is this possible in CSS?
To apply the css that you want to all items of the ZZZ class, you should use code like this:
.ZZZ {
//your code here
}
The . before the ZZZ signifies that it applies to items with the class ZZZ. This can be done with any class, as all you have to do is put a . (period) before the class name.
I think you are over thinking this, just use the css styling like you would any other time, and it works just fine. See fiddle: https://jsfiddle.net/pyexm7us/3/
HTML
<md-menu-content class="ZZZ">
Hello
</md-menu-content>
<md-menu-content>
World
</md-menu-content>
CSS
md-menu-content{background-color: red; color: white;}
.ZZZ{background-color: blue; color: white;}
This is absolutely possible with CSS
To apply styling to elements with the same class simply use the prefix .
.ZZZ {
//styling for elements with class ZZZ
}
If you want to work with id's then use the prefix #
#ZZZ {
//styling for elements with the ID ZZZ
}
Related
how do you apply a specific css to second-page
HTML
<div className = "section-header second-page">SOME MESSAGE</div>
Assuming the above:
CSS
.section-header {
background-color: black,
}
i want to apply a different background color specifically to second-page that does not modify section-header.
If you want the styling to apply to any element with .second-page class you should use:
.second-page {
backgound-color: red,
}
If you want the styling to apply only to .section-header elements that also have .second-page class, then you should use:
.section-header.second-page {
backgound-color: red,
}
When there's no space between two classes, it means it refers to an element with both classes.
For more information on CSS selectors, please check
https://www.w3schools.com/cssref/css_selectors.asp
Your HTML should be:
<div class="section-header second-page">SOME MESSAGE</div>
Your CSS could be:
.second-page {
background-color: black,
}
You can mix multiple classes within the HTML or target them separately.
If you need to validate your HTML code you can use this free service:
https://validator.w3.org/#validate_by_input
How to change the color only from text except everything is between tags ?
Sample text:
<b>A7</b> <b>D</b>
this is a test
<b>A7+</b> <b>G9</b>
this is a test
Assuming that all of that text is wrapped in a parent element (I've used <div>, but almost any other element would suffice), as such:
<div>
<b>A7</b>
<b>D</b>
this is a test
<b>A7+</b>
<b>G9</b>
this is a test
</div>
Then you can't change "all the text except the <b> tags", because CSS won't allow you to style the text without affecting the colour of the the <b> elements, you can, however, style the div and then 'unstyle' the b elements:
div {
color: #f00;
}
div b {
color: #000;
}
JS Fiddle demo.
To do this with jQuery (and, honestly, from the information you've posted jQuery seems unnecessary), you'd have to create wrapping elements for each of the strings of characters that are not wrapped in b elements and then directly style, or add a class to, those elements:
$('body').contents().filter(function(){
return this.nodeType === 3 && this.nodeValue.trim().length > 0;
}).wrap('<span />').parent().css('color','red');
JS Fiddle demo.
References:
contents().
filter().
parent().
wrap().
Try:
body{color:red;}
b{color:black;}
Fiddle here.
You could use jQuery like this:
$('body').css('color', '#FFCCFF');
$('b').css('color', '#000000');
But if you can do it in CSS it would be better:
body {
color: #FFCCFF;
}
b {
#000000;
}
Since you tagged this as jquery, I just provided a solution for this with jquery, You may wrap the html which was written by you in a paragraph tag like below. And then you have to use the .addClass function of Jquery to set different classes with different colours for that both paragraph and bold tag.
HTML
<p><b>A7</b><b>D</b>
this is a test
<b>A7+</b><b>G9</b>
this is a test</p>
CSS
.Paragraph{
color:red;
}
.boldtext{
color:black;
}
JQUERY
$('p').addClass('Paragraph');
$('p > b').addClass("boldtext");
DEMONSTRATION
Let's say I have <p>hi my name is john</p>. I'm aware that I can use span to select the characters, and then use CSS to make their styles different from the rest of the text. However, if I want "name" and "john" to be different from the rest of the sentence, and from each other, is this even possible? If so, how is this achieved?
Thanks in advance!
Yo can use ~ selector for this. write like this:
p span{ color: red; }
p span ~ span{color:green}
Check this http://jsfiddle.net/W4Vqk/1/
Perhaps I miss the point, but it sounds like you've answered your own question. You seem to know that you can wrap hi and john in span tags and then apply css to style them.
http://jsfiddle.net/W4Vqk/
p span:first-child { }
p span:last-child { }
<p><span>hi</span>my name is <span>John</span></p>
Or alternatively use class names
http://jsfiddle.net/ZegR2/
span.foo { }
span.bar { }
<p><span class="foo">hi</span>my name is <span class="bar">John</span></p>
Just do like this
<p>hi my <span>name</span> is <span>john</span></p>
in css
p span { color:#666666; }
if want different styles for name and john just give different class for both span tags
I'm wondering how can I apply a style to EVERY h2 that DOES have ANY any class attached to it, thus having the effect that the style will NOT be applied on a plain h2..eg..
<h2 class="1"></h2>
<h2 class="2"></h2>
<h2 class="3"></h2>
<h2 class="a"></h2>
<h2></h2>
All the ones with a class should have a style - and just plain h2 should not, (This is a huge site with hundreds of styles)...so any easy way to do this?
There is a method to do it but it's only possible with browsers that support CSS3 :not pseudo class.
h2[class] {
/* Styles for <h2> with a class, regardless of the value */
}
h2:not([class]) {
/* Styles for <h2> without classes */
}
I hope it works!
[Edit] I've made a simple demo for you here - http://jsfiddle.net/fL2sT/
What you're asking for is how CSS works by default.
The correct way to style elements which have no specific class assigned to them is to style the base element, as Ahsan demonstrated above. I don't know why he got downvoted.
h2 { property: value; }
Note that if H2 elements do have classes assigned to them, then that styling may override your base style.
So if you have: h2 { color:#333; font-size:2em; } as your base style, and then apply class="myClass" to it where: .class { color: #000; }, then the base style's color will be overriden (but not the font size). This is the cascade in Cascading Style Sheets.
Another way is to target them conditionally:
div#nav h2:first-child { property:value; }
which gives you contextual control, but again, class assignment will always override base styling, and may also override context targeting if the class application has higher specificity.
Why not simply use
h2[class] { ... }
I have the following
<p class="main yellow">Hello World</p>
I would like to write a css element that refers to only elements with main and yellow. Is there a way to do this?
Eg. the following doesn't work, but would be what I'm after
.main + .yellow { color:green }
This should grab it:
.main.yellow { color:yellow; }
Though you may get differing results in different browsers. I use QuirksMode to get an idea of what will/won't work cross browser.
You just need to specify them as
.main.yellow { color: green; }
No space between the two classes.
does this work for you?
.main.yellow{
color:green;
}
As others have already said, what you want is:
.main.yellow { color:green; }
However, let me quickly explain why your first attempt didn't work. The + keyword refers to a following element, i.e. the element after.
Your example would have matched the following HTML...
<p class="main">Hello</p>
<p class="yellow">World</p>
...and styled the second paragraph (.yellow) green. So ".main + .yellow" means "select a .yellow that is immediately after a .main".