I'd like to integrate a theme tag to my elements so they appear in diffrent colours. But since the css selectors have the same css specificity the latest overrides the earlier defined rule.
this is an example that shows my problem:
<div class="red">
<div class="box">This should be red</div>
<div class="yellow">
...
<div class="box">This should be yellow (nested in x levels under the div.yellow)</div>
...
</div>
and here my css
.box { width: 100px; height: 100px; }
.yellow { background-color: yellow; }
.red { background-color: red; }
the box should be listed somewhere, but as soon as it is a sub child of another color definition it should been overwritten.
thanks for any help!
You shouldn't really be doing things this way -- if your theme changes, then suddenly things with class yellow may actually be blue, for example. I would suggest finding a common way of naming things (even if it's just colour1, colour2, colour-highlight...) and then specifying those styles. You can then look into the way your pages are designed and make the rules more specific as necessary (either by using !important or by making the rule more specific, e.g. .colour1 becoming .box .colour1 or div.colour1).
Try:
.box { background-color: inherit; }
See:
http://jsbin.com/imube/edit
I don’t quite see the problem. Here’s what I get with that code:
alt text http://www.pauldwaite.co.uk/images/so/1905834.png
You probably need to use CSS's !important keyword eg:
.yellow { background-color: yellow !important;}
Related
I work with BEM and use a flexbox container purely for alignment and responsive design purposes. The problem is that sometimes it also wants to scale its daughter elements, which I don't want. Like this:
.card {
width: 120px;
background: gray;
}
.container {
display: flex;
align-items: center;
}
.flex-item1 {
width: 50px;
background: blue;
}
.flex-item2 {
overflow-wrap: normal;
background: green;
}
.ruller {
width: 50px;
background: gray;
}
<div class='card'>
<div class='container'>
<div class='flex-item1'>
I'm picture 50px wide
</div>
<div class='flex-item2'>
I'm long text
</div>
</div>
</div>
<div class='ruller'>
My width is 50px
</div>
Here is the blue element is getting scaled and its rule width is ignored.
One direct solution for this is to just explicitly forbid flexing for every element.
.flex-item1 {
width: 50px;
background: blue;
flex: none; /* the fix */
}
But container is a general class, I'm using it in tens of different situations, I don't want to add more CSS code to all possible classes of its daughter elements, nor do I want to add another class like container-item to all those elements in HTML.
Another direct solution for this would be
.container * { /* the fix */
flex: none;
}
But this goes against general BEM guidelines on using selectors. I would like to avoid using * selector here.
Is there a way third way to do it? I.e. a way that doesn't add any CSS rules to styles of daughter elements and which does not use * selector.
What makes me ask such a question is the existence of rules like align-items, which are placed to the parent element (i.e. flexbox itself) by the acting on daughter elements (i.e. flex-box items). I imagine my solution would be is something like this:
.container {
display: flex;
align-items: center;
flex-items: none; /* a pseudo rule, which doesn't exist and need to be replaced by other rules to work */
}
If you insist on following BEM without exception, then you should have the rules you need within classes you've defined for your elements. That would be the BEM way. You may not like having that code in 20-30 different places as you say, but that is the tradeoff of BEM.
Personally I combine BEM with utility classes when it makes sense, I don't believe that following BEM blindly to the letter produces cleanest and easiest to maintain codebases.
On the other hand rise in popularity of Tailwind goes to say that BEM and similar methodologies don't work for all.
All this being said, I would suggest sprinkling some utility classes on your BEM project and enjoying best of both worlds.
That seems to be a dumb question, but I'm really surprised, after a few websites worked with. Why does the foo div is red, not green?
https://jsfiddle.net/de8he92v/
<div class="wrapper-2">
<div class="wrapper-1">
<div>foo</div>
</div>
</div>
<style>
.wrapper-1 { background-color: red; }
.wrapper-2 { background-color: green; }
</style>
Edit
Ok, I read ThisClark answer, but still don't understand.
Here is updated fiddle:
https://jsfiddle.net/de8he92v/3/
Now the foo is yellow, but why it is not green?
The foo is inside red wrapper. Then, the red wrapper is inside green wrapper. So why we don't see green? What the madness?
In other words, if the puppy is inside the kennel, then we would see the kennel. But here we see only the puppy.
<div>foo</div> has the default user agent styles applied to it which is typically a transparent background and display: block.
Since it's inside .wrapper-1 and has a transparent background, you will see red.
To make this really stand out, add this to your fiddle and run it again:
div {
margin: 5px;
padding: 5px;
border: solid black 5px;
}
That additional style will apply to all the divs on the page and give you a better visual idea of where they are and what styles they have.
With the additional style applied, it ends up looking like this:
Additionally, div.wrapper-1 is said to be a child of div.wrapper-2 and even though 1 comes before 2 in numerical order, the div.wrapper-1 styles appear on top of their parent element, div.wrapper-2. The same parent-child relationship applies between div.wrapper-1 and <div>foo</div>.
EDIT
Your updated code in 3D view with margin, padding, and border:
Your update without additional style:
So I want to have a horizontal rule <hr> with a padding of 50px using CSS. However, I already have custom CSS assigned to the <hr> tag which already has padding-bottom:25px; padding-top:100px; padding-left:50px; padding-right:50px; Which is being used to divide the footer from the main content. So how would I achieve having two different CSS styles for the same element?
P.S. I am using Twitter Bootstrap 3
I actually found the answer to what I wanted after all this time.
Basically i did the following:
hr.custom {
margin: 10px;
etc...
}
Then I used:
<hr class="custom">
There are plenty of different ways to add different CSS to different HTML elements. Mainly, we use IDs and classes, read more about IDs and classes on the W3Schools website, I use it all the time. Here is an example of using both the ID and class system to style CSS:
The HTML:
<p class="coolclass">This is the cool class</p>
<p class="redclass">This is the red class</p>
<p id="strangeid">This is the strange ID</p>
The CSS:
.coolclass{
color: blue;
}
.redclass{
color: red;
}
#strangeid{
background-color: green;
color: white;
}
Here is a live example: http://jsfiddle.net/Xanco/8sex7x3p/
New live example with HR stylings: http://jsfiddle.net/Xanco/8sex7x3p/2
Let me make it simple then ..
give it an id and style it accordingly
See it here
Just for this element, you can add a new class to your <hr> like this:
<hr class="actualClass newClass">
with this CSS:
.newClass {
padding: 50px !important;
}
I'm using Bootstrap 3 to design a website, and I would like to ask how could I apply a custom class to an existing col-md-12 for example, so I won't use ids (#cusom-name) ?
should I write my css like
.col-md-12 test {
background: blue;
padding-left: 10px;
}
and my html like:
<div class="col-md-12 test">div content</div>
or should I just stick to something like using a standard col-md-12 and inside it use my custom class with a new div? like
<div class="col-md-12">
<div class="test">
test content
</div>
</div>
I hope it's clear enough... thanks!
In your HTML, load your custom stylesheet file AFTER you load the Bootstrap 3 stylesheet file. Don't ever edit Bootstrap's files, as updating will become difficult.
Then, in your stylesheet just define the class as normal, on its own.
.blue-bg {
background: blue;
padding-left: 10px;
}
Then, as you already have in your HTML, us it like this;
<div class="col-md-12 blue-bg">
div content
</div>
What this will do is apply all the styles from both .col-md-12 (defined by Bootstrap) and .blue-bg (defined by you).
The reason we load your stylesheet last, is for conflicts. If both you and Bootstrap are defining a property. For example, Bootstrap sets the background to red, and then you set it to Blue. Whatever the last stylesheet says, will be obeyed.
In this way, you can define yet another class;
.red-bg {
background: red;
padding-left: 10px;
}
Then use them both as often as you like, however you want. Consider this.
<div class="row">
<div class="col-md-6 blue-bg">
Div with a blue background.
</div>
<div class="col-md-3 red-bg">
Div with a red background.
</div>
<div class="col-md-3 blue-bg">
Another div with a blue background.
</div>
</div>
Just write it like this in your own CSS:
.test {
background: blue;
padding-left: 10px;
}
And like this in the html:
<div class="col-md-12 test">
<p>test content</p>
</div>
Don't change bootstraps css because then it will be harder to update it later on, insteed work with a css you create which overwrites bootstraps rules.
It really depends on what you are styling really. As well as your code style. You could add another modify class to the .col-md-12 class, or nest another class inside that container. There isn't an always or never answer for modifiers. And by modifiers, I mean overrides on BS3's default/core classes.
Also, in your example code, you forgot the period before test. It should be like this if you're going to nest that class inside:
.col-md-12 .text {}
Because .col-md-12 is a grid component, I think it makes sense to nest a div.test inside that component to not muddy up the context of what that element does, or how it behaves. An example that could have unwanted effects would be if you added padding to all .col-md-12 in your app, instead of the one off use of padding. To add the padding in this case, you could nest .test inside of .col-md-12, and add padding to .test (instead of the grid element). In my opinion, you'd have a nice separation of code and it's use. Also, you might be able to use that newly created .test class in other places of your app.
There are a lot of ways to organize your CSS, and keep elements together based on purpose. If you're interested in some reading, you might check out this resource: http://smacss.com/ (among others).
In CSS, you can have properties that will be set for both classes only, but there shouldn't be a space between the class names, as you have. It should be:
.col-md-12.test {
background: lightblue;
padding-left: 10px;
}
you don't need to add additional div, u can have
<div class="col-md-12 test">div content</div>
and define new as well as u can also override bootstrap css for col-md-12 but if u apply directly on it , it will applicable to everwhere where u have used this bootstrap class. so its better to add your custom css on .test e.g
.test {
width: 80%;
padding: 2%;
}
and if your custom css is not overriding bootstraps css u can use !important e.g.
.test {
width: 80% !important;
padding: 2% !important;
}
Defining a rule with the !important 'attribute' discards the normal concerns as regards the 'later' rule overriding the 'earlier' ones.
I have written a class for a textfield with a certain style. The field appears at 2 very different place within the website, with different parent elements. The second need another margin-top. What is an efficient way to change the original margin-top, since I cannot use pseudo-classes?
js fiddle
HTML
<div class="some_parent">
<div class="my_styled_field"></div>
</div>
.....
<div class="some_other_parent">
<div class="my_styled_field"></div>
</div>
CSS
.my_styled_field{
margin-top: 2rem;
}
.some_other_parent .my_styled_field{
margin-top:3em; //what ever you want
}
this is the way to apply some other styles to the same class, having different parents .
Pretty sure the most efficient way - most of the time - as in best performance, would be to add another class to your second styled_field.
If you add another class to your second styled_field, you would need only 1 reflow to reach it:
.newclass{margin-top:5px;}
Whereas using the descendant selector which others are selecting is surely worse performance, this means the browsers has to check a lot of elements recursively:
.parent .styled_field
If you don't want to add a class for some reason, better performance than the descendant selector would be the child selector:
.parent > .styled_field
When thinking about css performance, remember that even though we read left-to-right, browsers read right-to-left.
Where we would check all .container elements for an image-tag, browsers find all image-tags - then checks if they are in a .container
Using CSS class hierarchy:
.some_other_parent .my_styled_field {
margin-top: 2em;
}
Youc can do this:
FIDDLE EXAMPLE
.some_parent .my_styled_field{
width: 3rem;
height: 3rem;
margin-top: 2rem;
background-color: red;
}
.some_other_parent .my_styled_field{
width: 4rem;
height: 4rem;
margin-top: 4rem;
background-color: green;
}
This way, you aply style to .my_styled_field depending on his parent element.