I'm beginning to learn more about CSS formatting and now I've picked up ABEM to use along with SCSS to develop a WordPress site.
Is it then valid to add a modifier directly to let's say an h1 block? Like this:
HTML
<h1 class="-green">To make the text green.</h1>
CSS
.-green {
color: green;
}
Or do I need to add a block or an element before to modify it instead?
Like this:
HTML
<h1 class="a-heading_text -green">To make the text green.</h1>
CSS
.a-heading_text.-green {
color: green;
}
ABEM is a BEM variant and a lonely modifier wouldn't be BEM-compliant. Your second option is the right one: you "need to add a block or an element before to modify it instead".
If you want to create a standalone helper for a simple purpose, then it is not a modifier but a block:
<h1 class="green">To make the text green.</h1>
With the CSS:
.green {
color: green;
}
This helper block can of course be mixed with other blocks or elements. The following code is valid:
<h1 class="a-heading_text green">To make the heading text green.</h1>
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
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
}
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
Am using bootstrap LIKE dropdown menu with custom HTML5 attribute with data- as a prefix with a value starting from #, now for some reason I can't change this.
Here's the script link (It's like this dropdown)
Now the issue is am using dynamic approach using PHP so child of an element changes often so I am not using nth-child so thought of using attribute-value selector but CSS doesn't accept if value contains #. Any workarounds for this?
<div data-demo="works">This works</div>
<br />
<div data-demo="#doesnt_works">This fails</div>
CSS
div[data-demo=works] {
color: red;
}
div[data-demo=#doesnt_works] {
color: green;
}
Demo
Use quotes:
div[data-demo='#does_work'] {
color: green;
}
DEMO
Why it has to be quoted? Because # has special meaning in CSS. Quoting it hides that special meaning. The same effect could be approached using ": [data-demo="#does_work"] or by escaping # with \: [data-demo=\#does_work]
Wrap the value in quotes "
div[data-demo="#doesnt_works"] {
color: green;
}
http://jsfiddle.net/jeq5W/1/
I'm developing a web based source code editor. I'm thinking of adding support for themes (syntax highlighting).
//Default theme
.default-reserved-word
{
background-color : red;
}
//Some other theme
.monokai-reserved-word
{
background-color : green;
}
inside the editor each syntax highlightable word is surrounded by a span tag with the appropriate class:
....
<span class="default-reserved-word">def</span>method name
...
which I want to convert to (when the user clicks a "change theme" button)
....
<span class="monokai-reserved-word">def</span>method name
...
Is there a simple way of switching these CSS rules without going through all the elements and modifying the class attributes?
(FWIW, I need to support IE7+, FF3.6+)
I'd suggest using a different method, perhaps have a theme class on a higher parent container:
<div class="theme-default">
And then use CSS like this:
.theme-default .reserved-word {
color: blue;
}
Whilst this method is not exactly what you've asked for it will simplify the process of changing styles, for a start you won't have to search through loads of spans, finding the current class of theme-name + ' -reserved-word' (etc) and doing a string replace on them.
Add a class name to the root element (<html>) and change that on use input.
.theme1 .reserved-word { color: red; }
.theme2 .reserved-word { color: green; }
and then change
<html class="theme1">
to
<html class="theme2">
with Javascript.
You can use jQuery for that:
var elements = $('.default-reserved-word')
elements.removeClass('default-reserved-word');
elements.addClass('monokai-reserved-word');