I have the following code:
<div class = "badge">
<div class = "badge-header">
</div>
</div>
What's the proper way to style badge-header in css?
Is it
.badge .badge-header {
}
or
.badge-header {
}
also how do we structure our css names? How do we structure our divs and what selectors should we use for each above?
If you have a div inside a div, what is the naming convention that we should stick to in CSS?
Both
but the first will apply the style only when the "badge-header" is inside of a "badge"
in the second will apply for all "badge-header" elements.
See example: https://jsfiddle.net/6bvLtqLw/
CSS
.badge-header{
color:blue;
}
.badge .badge-header{
background-color: yellow;
}
HTML
<div class="badge">
<div class="badge-header">
inside
</div>
</div>
<div class="badge-header">
outside
</div>
Both work
.badge .badge-header {
}
above one applies style to those elements with class '.badge-header' AND are under elements with class '.badge'
.badge-header {
}
and the above one applies style to all the elements with class '.badge-header' regardless of element's position in DOM.
Both
but the first will apply the style only when the "badge-header" is inside of a "badge"
.badge .badge-header {
}
in the second will apply for all "badge-header" elements.
.badge-header {
}
The first variant obviously will only style .badge-header if used in the context of a .badge. The second will apply to all .badge-headerregardless of their context.
If you are certain .badge-header will never need to be used outside of .badge, you go with variant two as it is shorter and more concise.
If it might be useful to reuse the .badge-header in different context than only .badge, then use *both variants. Put all styles that all .badge-header have in common in .badge-header { ... }. Put the context-dependent styles in .badge .badge-header { ... }.
Related
I want to alter multiple HTML elements that live inside a singular CSS class.
For example:
<div class="main">
<h1>Hello</h1>
<p>Good Morning</p>
</div>
I know it is possible to do this:
.main h1 { ... }
.main p {...}
Is it possible to create a single CSS clause that does this in one line? (Like this:)
.main h1,p {...}
Thanks!
You may use a scoped universal selector, as a shortcut for every element inside .main, e.g.
.main * { ... }
or list all the specific elements inside .main using :is or :where (the difference is in their specificity), e.g.
.main :where(h1, p) { ... }
Reference (MDN):
— https://developer.mozilla.org/en-US/docs/Web/CSS/:is
— https://developer.mozilla.org/en-US/docs/Web/CSS/:where
Try using
.main h1,
.main p {...}
I just encountered the issue, that I cant find out how to overwrite another class' style i.e. Background Color on hovering another class of same div. My example:
<div class="shapeClass bgTransparentGrey"></div>
<div class="shapeClass bgTransparentGrey"></div>
<div class="shapeClass bgTransparentGrey"></div>
the class shapeClass defines the shape, the class bgTransparentGrey defines the bg color. On shapeClass:hover i want to change styles of the bgTransparentGrey class, but only to the hovered element.
Best
Tassilo
You cannot edit the attributes of a class on the fly with Javascript. You would need to write an additional class that you add that overwrites the others styling.
$('.container-styles').hover(function(){
$(this).addClass('overwrite-styles');
}, function(){
$(this).removeClass('overwrite-styles');
})
.container-styles {
background-color: red;
height: 100px;
}
.overwrite-styles {
height: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="container-styles"></div>
You can use this selector which will only affect elements which have BOTH classes:
.boxElement.bgTransparentGrey { ... }
If you place that somewhere BELOW/AFTER the rules for the single classes in your stylesheet, settings in it will overwrite the previous settings.
(note: there is no space between the classes, therefore it only applies when both classes are assigned to the same element)
Hope you can help me with this CSS trick.
Basically what I need is this kind of CSS
if 'container' has sibling 'mySibling' {
#myDiv{
}
}
if 'container' has no sibling {
#myDiv{
}
}
For this HTML
<div id="mySibling"></div>
<div id="container">
<div id="myDiv"></div>
</div>
sibling sometimes will not be present, and I need different css for myDiv in these cases
Any help would be appreciated, I tried doing + and ~ selectors but I don't think I have proper logic.
You can do something like this:
#mySibling + #container #myDiv {
background-color:blue;
}
Here is a fiddle showing it off: http://jsfiddle.net/Lzq3S/
Note, I've changed the ids to classes in the fiddle just to show the two sets of div elements, but you get the idea...
This breaks down to myDiv that is a child of container that is a sibling of mySibling.
First off, make sure your html is correct; in your example, you forgot to specify whether you're using an id or a class! Possible options for your html:
<div id="container">
<div class="mySibling"></div>
<div class="myDiv"></div>
</div>
or
<div id="container">
<div id="mySibling"></div>
<div id="myDiv"></div>
</div>
For the sake of your example, we'll use id's, even though some would say it's better practice to use classes
Now for the CSS.
The + and ~ selectors operate in slightly different ways. The + selects adjacent siblings, while the ~ selects all siblings. Because CSS doesn't handle logic quite the same way as actual programming languages, you can't check to see if a container holds a certain element before applying styles, but you can use the sibling selectors to style elements that are next to certain other elements.
My suggestion:
.container #myDiv {
/* Your styles for #myDiv */
}
.container #mySibling + #myDiv {
/* Your styles for #myDiv it is next to #mySibling.
Will override the styles a */
}
You can check out an example here: http://jsfiddle.net/8r2TZ/. Note, I specified "myDiv" as a class, because I used it more than once, and my CSS reflects that.
If you do need to have a CSS rule for each case without relying on overriding, it's still possible, since there's a selector for elements with no siblings:
#mySibling + #container > #myDiv {
}
#container:only-child > #myDiv {
}
(You can even achieve compatibility with old IEs by using :first-child in lieu of :only-child since #mySibling comes first.)
I have twp elements inside my Div,both have same class name. I want to hide my first element with the class name .cart. I am using the below code.
.component-bottom .component-basket + .cart{
display:none;
}
<div class="component-bottom">
<div class="component-basket">
<div class="cart">
</div>
<div class="cart">
</div>
</div>
</div>
Am I using the correct code?
You can use a direct child selector for the .cart element:
.component-bottom .component-basket > .cart
{
display:none;
}
Now you only want the first element of this selector. There isn't an original selector for this, but you can make a overwrite selector for this.
You can overwrite all but the first one ElementA ~ ElementB:
.component-bottom .component-basket > .cart ~ .cart
{
display:block;
}
This search for all .cart elements inside .component-basket where ANY previous adjacent sibling is .cart. The first of the element doesn't have a previous sibling of this class, so it would not be selected.
This is called a general sibling selector.
jsFiddle
This should support IE7 and above:
Note Requires Windows Internet Explorer 7 or later.
source: http://msdn.microsoft.com/en-us/library/ie/aa358824(v=vs.85).aspx
an easier solution commented by #jrConway:
Make it display: block by default and use:
.component-bottom .component-basket > .cart:first-child
{
display: none;
}
Example
Note that this only work when you use ONLY .cart as child element. Whenever an other class is at the first 'place' it will not work.
Using adjacent sibling selector won't work here, as your element is nested inside .component-basket and hence it fails.. Simple way is to call a class on the element you want to hide, if you cannot change the DOM than you can use first-child or nth-of-type(1)
.component-bottom .component-basket div.cart:nth-of-type(1) {
display:none;
}
Demo
As #Vucko already commented, nth-of-type() is a CSS3 spec pseudo..
Hence if you want to support legacy browsers, you can use Selectivizr,
this will save you a lot of classes/ids.
Stick this in your CSS file:
.hide {
display: none;
}
Then add that class to whatever element you want hidden like so:
<div class="component-bottom">
<div class="component-basket">Foo</div>
<div class="component-basket cart hide">Foo</div>
</div>
The advantage of this method is that you get to re-use that "hide" class anywhere you want.
As understood, check this might help
CSS
.cart{
display:none;
}
.component-bottom .component-basket
{
//some common properties
}
HTML
<div class="component-bottom">
<div class="component-basket cart">component-basket Hidden div</div>
<div class="component-basket">component-basket visible div</div>
</div>
This will hide the div with the cart class (the First div)
Thanks,
Dhiraj
I only want to select the element if it has one class and that class is 'foobar'.
<style>
.foobar {
/* only apply to an element if the element has a class and the only class is 'foobar'. */
background: black;
color: white;
}
</style>
<div class="foobar">i should be selected</div>
<div class="foobar ipsum">i should not be selected</div>
I know I could select it with adding a style for .foobar.ipsum { do one thing } and .foobar { something else } but I don't have control over the additional classes. Basically when the element has only the foobar class, I know it's my element and coming from somewhere else. This is what happens when CSS Library worlds collide. I know that there are deeper issues to resolve here but this is stumping me right now.
The simplest way with pure CSS is to use an attribute selector:
[class="foobar"] {
/* only apply to an element if the element has a class and the only class is 'foobar'. */
background: black;
color: white;
}
You may not have control over the other elements, but if you have control over yours and you can modify its class attribute, mayabelle makes a good point about assigning your element its own special class and selecting by that class instead. That way you explicitly state which element is yours rather than going by the assumption that not having additional classes means it's yours.
You will need to use an attribute selector:
[class="foobar"] {
background: black;
}
http://jsfiddle.net/dA2dp/
If it's "your element", can you apply an additional class to it? Then you can select using that:
<style>
.foobar.yourClass {
/* your css */
}
</style>
<div class="foobar yourClass">i should be selected</div>
<div class="foobar ipsum">i should not be selected</div>