Is there any kind of inheritance in css?
For example, divA, divB, divC all existing in the same spot with all the same properties, only differing by their z-index?
The idea being using jquery or whatnot to have different transitions between the sections.
Is anything like this possible or am I going about this the wrong way?
Is there any kind of inheritance in css?
Yes. Most properties can be given the value inherit which means "The same value for this property as the parent node has". This isn't the type of inheritance you are thinking of though.
For example, divA, divB, divC all existing in the same spot with all the same properties, only differing by their z-index?
CSS has no way to say that one rule-set should copy values from another one. You can do:
#divA, #divB, #divC /* Or another selector that matches all the elements */
{ /* Common rules */ }
#divA { /* specific rules */ }
/* etc */
or various other strategies including generating your CSS using a script and using multiple classes on a single element.
You can specify multiple classes for a single element, e.g.
<div class="divA divB">
So with that you can do some clever trickery to get what you want.
CSS does have inheritance, that is one of the main principles of CSS.
jQuery can handle pretty much any scenario you want. If you provide a more detailed code writeup we can help more.
HTML:
<div id="container">
<div id="divA">A</div>
<div id="divB">B</div>
<div id="divC">C</div>
</div>
CSS
#container div
{
/*all your common styles here */
}
#divA { /*div specific style here */ }
#divB { /*div specific style here */ }
#divC { /*div specific style here */ }
Related
What css selector could I use below to target just the outer div?
<div>
<div>...</div>
<div>...</div>
</div>
<style>
OUTER.DIV.ONLY {
background: url(outer.png);
}
</style>
Alternatively, I'd be happy to know if there is a way to name the outer div with a locally scoped name that doesn't add anything to the compiled svelte.
I can't just add class="outer" because that is way too likely to conflict with existing stylesheets.
I could add class="outer-au9a8bo9u" but that's clunky, especially since that class will add useless bytes to the svelte compiler output.
I'm posting this in the hopes that there's something more elegant and efficient than that.
You can solve this with CSS:
div:not(div > div)
Literally 'a div that is not the child of another div'. Not exactly the prettiest selector every, but it works.
update
It seems the above does not always work due to (what I suspect) a bug where the selectors inside the not are not scoped. (bug report
As an alternative you can turn the logic around:
/* adds background everywhere */
div {
background-image: url(...);
}
/* remove again from children */
div div {
background-image: unset;
}
Well I'm watching videos about oop css with bem. I didn't understand one thing. I have a media object and I use it everywhere like in navbar and content and footer etc. So how shall I change the media object and insiders. I guess 3 ways there are.
1 - I can catch inside other blocks grandchild chooser
it will like ".navbar .media".
This way makes me worrying because of grandchildren is making slow and complicated I think. Don't think about only .media. I have to select media-item etc etc...
2 - I can give another class to .media like .navbar together
it will like ".navbar.media".
This way need more classes to html so it makes me thinking.
3 - I guess there is no third option if there is please let me know :) Which way I shall do.
Thank you already.
You should add an extra class, navbar__media (that's a double underscore for descendant), and add that to the media elements inside of the navbar.
A rule of BEM/OOP CSS is that an element should always have their style defined by the classes they have, and not based on where they are in the DOM.
For reference: http://getbem.com/naming/
Example:
<div class="navbar">
<div class="media navbar__media"></div>
</div>
<div class="media"></div>
With this css:
.navbar {
background: #00f;
}
.media {
background: #f00;
}
.navbar__media {
background: #0f0;
}
I was wondering if it is possible to define the styles of an element depending on the value of the body ID.
It is difficult to explain but something like this would be ideal:
HTML:
<body id="home">
CSS:
body#home {
a { /* code here */ }
p { /* code here */ }
}
body#profile {
a { /* different code here */ }
p { /* different code here */ }
}
I know I can do this:
body#home a { /* code here */ }
but that becomes very repetitive.
I will be looking forward to your responses,
Peter
You can do this if you use a CSS framework like SASS or LESS
Here's the documentation on how to do this with LESS. Hope this helps.
IDs are supposed to be unique, so #home { ... } is acceptable.
Then and child elements would be:
#home .myClass { ... }
This technique if often used to re-skin pages be simply changing the ID or class on a body.
Be aware that while nesting styles like this can be supported using CSS frameworks, it should be well thought-out to maintain modularity and clean inheritance in your CSS. You can end up doing more harm than good. In particular, watch out for something know as the inception rule, described here:
http://thesassway.com/beginner/the-inception-rule
The Inception Rule: don’t go more than four levels deep.
Any change you make to your markup will need to be reflected into your
Sass and vice versa. It also means that the styles are bounded for
life to the those elements and that HTML structure which completely
defeats the purpose of the "Cascade" part of "Cascading Style Sheets."
If you follow this path, you might as well go back to writing your CSS
inline in your HTML (please don't).
The best way to do what you are talking about is to have a base stylesheet the site.
They have either:
A <style> element in the header overriding anything you choose
or
Have a different stylesheet for each page
I'm trying to make a very basic HTML/CSS/JS widget, but I'm having some problems with the CSS layer. It seems that I can't write selectors that work, and it's becoming very aggravating. In particular, I'm trying to override the font-size setting inherited from the body css selector for the widget. My HTML (actually, it's Hamlet) is:
<div class="container">
<div id="flashcard-container">
<div class="span6 offset3 well flashcard">
<div class="front">
<p class="flashcard">This is the front of the card.
and my CSS file says:
.flashcard p {
font-size: 24px;
}
div .back {
display: none;
}
Actually, I have a problem with both selectors. In particular, the first one just does not work to match the xml structure. The second one seems sub-optimal. Why should I need to specify that I'm talking about a div at all? I just want to quantify over backs, whatever tag they are.
I realize this is extremely basic, but I think that between this and some Chrome bugs with 3d transitions, I got myself extremely confused. It has been many years since I've dealt with the front-end. :(
If you wish to target a node with a class attached, the syntax is
elementname.classname {...}
(although OOCSS fanatics will suggest just using .classname and making your CSS structurally agnostic).
I am not sure what you mean by 'quantifying over backs', but if you simply want to target an element with a 'back' class, you can target it as so:
.back {...}
Though it might be best to contain the styles as 'back' is a rather generic class name:
.flashcard .back {...}
Try this:
p.flashcard { ... }
div.back { ... }
Actually I can't see a div with back class in your code.
You may as well use just .flashcard and .back. Specifying div or p just narrow the choice. If you specify .flashcard it will be applied both to, say, or .
But if you write
.flashcard p { ... }
It means that you chose all descendants of .flashcard, like:
<div class="flashcard">
<p>...</p>
</div>
I am a CSS newbie. I am just wondering, is that possible to include one common class into another class?
for example,
.center {align: center};
.content { include .center here};
I came across css framework - Blueprint. We need to put the position information into HTML, e.g.
<div class="span-4"><div class="span-24 last">
As such, we will place the positioning attribute inside html, instead of css. If we change the layout, we need to change html, instead of css.
That's the reason I ask this question. If I can include .span-4 into my own css, i won't have to specify it in my html tag.
Bizarrely, even though CSS talks about inheritance, classes can't "inherit" in this way. The best you can really do is this:
.center, .content { align: center; }
.content { /* ... */ }
Also I'd strongly suggest you not do "naked" class selectors like this. Use ID or tag in addition to class where possible:
div.center, div.content { align: center; }
div.content { /* ... */ }
I say this because if you do your selectors as broad as possible it ends up becoming unmanageable (in my experience) once you get large stylesheets. You end up with unintended selectors interacting with each other to the point where you create a new class (like .center2) because changing the original will affect all sorts of things you don't want.
In standard CSS, it's not possible to do this, though it would be nice.
For something like that you'd need to use SASS or similar, which "compiles" to CSS.
This is where the Cascading in Cascading Style Sheets comes in to play.
Think of your html element or widget/module (group of nested html elements) as an object. You know you're going to have objects that share the same properties so you'll want to create a reusable class they can utilize.
.baseModule {align: center;}
Say your module is a message (error, flash...). So you "extend" or "include" your .baseModule class because all messages will be center aligned (see final html example).
.message {border: 1px solid #555;}
Furthermore you want your error messages to have a red background. Additionally you can overwrite the border property from .baseModule.message here if you wanted it to be a different color or something.
.error {background-color: red;}
So now you have a few css definitions that can be reused with ease.
<!-- Regular message module -->
<p class="baseModule message">
I am a regular message.
</p>
<!-- Error message module -->
<p class="baseModule message error">
I am an error message. My background color is red.
</p>
To relate this to your question you'd basically leverage multiple class names for maximum reusability. Granted ie6 doesn't support chained selectors (class1.class2.class3), but it's still a neat trick!