So, I'm having trouble understanding the difference between commas to separate classes and the absence of them. Also, I am using 'Skeleton' style sheets for the grid system. Here's an example:
<div id="header_buttons" class="eleven columns, header_buttons">
<button type="button">Github</button>
</div>
And for 'header_buttons':
.header_buttons {
margin-left: 180px;
}
With the commas, I get my intended result:
But without them, I get this instead:
I know the basis of having multiple classes is to not use commas. But in my case, if I take them out, why do I not get my intended result?
Skeleton adds .column:first-child { margin-left: 0; }, so that rule will have higher specificity than .header_buttons { margin-left: 180px; }.
Without the comma in your markup, .column:first-child { margin-left: 0; } is applied via skeleton and overwrites .header_buttons { margin-left: 180px; }
When you add the comma there, that breaks skeleton's .column class so that rule no longer applies, and the rule you specified for .header_buttons applies.
You can see it here
.header_buttons {
margin-left: 180px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" rel="stylesheet"/>
<div id="header_buttons" class="eleven columns header_buttons">
<button type="button">Github</button>
</div>
<div id="header_buttons" class="eleven columns, header_buttons">
<button type="button">Github</button>
</div>
Related
I have div element:
<div class="...">...</div>
So when window will be sized to min width and style hidden-xs apply, I need to add few more classes to my div.
After window sizing it should be:
<div class="... margin-top padding-top">...</div>
How to add these condition in to css?
p.s. Maybe it is possible to do directly in html by Angularjs?
You can't dynamically add/remove classes in CSS.
What you could do is dynamically add/reset styles, with #media queries.
Let's say all targeted elements have a class called .target-el.
All you have to do is:
set .target-el.margin-top rules for both small and large sizes.
do the same for .target-el.padding-top.
instead of removing a class, set the rule to auto, none, 0 according to the default value for that rule.
I've set the class .margin-top along with a target marker class .target-el so you could still have your default .margin-class working properly elsewhere in your code.
Here's an example:
.target-el {
width: 50px;
height: 50px;
background-color: #ccc;
position: absolute;
}
.target-el.margin-top {
margin-top: 0;
}
.target-el.padding-top {
padding-top: 0;
}
#media screen and (max-width: 700px) {
.target-el.margin-top {
margin-top: 10px;
}
.target-el.padding-top {
padding-top: 5px;
}
}
<div class="target-el padding-top margin-top"></div>
From Bootstrap code, the .hidden-xs code is the following:
#media (max-width: 767px) {
.hidden-xs {
display: none !important;
}
}
It uses a media query to be applied (screen > 767px). Instead of manipulating the DOM with JavaScript, I would suggest to use the same media-query on your classes:
<div class="... margin-top padding-top">...</div>
#media (max-width: 767px) {
.margin-top {
margin-top: 10px;
}
.padding-top {
padding-top: 10px;
}
}
I don't see a need for js likely, I would create new css for it:
<div class="hidden-xs margin-top-xs padding-top-xs">...</div>
use a media query css selector:
#media (max-width: 767px) {
.margin-top-xs {
...
}
.margin-padding-xs {
...
}
}
You can try to implement it with CSS specificity. Something like either of the following:
#MyDiv1.hidden-xs,
#MyDiv2 .hidden-xs{
margin-top: 10px;
padding-top: 10px;
}
<div id="MyDiv1" class="hidden-xs">
</div>
<div id="MyDiv2">
<div class="hidden-xs"></div>
</div>
stead implement it with CSS 'specificity'. Something like:
In order to add custom classes depending on a media query, you can use javascript.
This can be done with window.matchMedia, or by using a library like Enquire.js.
If you don't want to look for the media query that was specified in the bootstrap framework you could also use an [attribute*=value] selector to detect all the classes that contain the "-xs" characters, and depending on that to add custom properties for the rest of classes.
div[class*="-xs"].margin_top {
margin-top: 10px;
}
<div class="hidden-xs margin_top">The first div element.</div>
<div class="visible-xs margin_top">The second div element.</div>
Very new to Scss/Sass Elsewhere in my mod.scss file, have coded the style of Ul > li that I reuse quite frequently. However, in another mod.scss file, I need a change this code for a single particular instance.
Is it possible to essentially create an if-like statement that says: "If a UL/LI tag appears UNDER the .content-section class, take on behaviors X,Y and z"?
.content-section
{
margin: 40px 0px;
& .siteTitleText
{
margin-bottom: 50px;
}
& .headers
{
margin-bottom: 30px;
}
img
{
margin: 30px 0px;
}
*ul*
}
HTML:
<div class="content-section vendors">
<p class="headers">Modules, partials, and vendor</p>
<p class="bodyText">As you can see this divides my project into three basic types of files. Modules, partials, and vendored stylesheets.</p>
<ul>
<li class="bodyText">The modules directory is reserved for Sass code that doesn't cause Sass to actually output CSS. Things like mixin declarations, functions, and variables.</li>
<li class="bodyText">The partials directory is where the meat of my CSS is constructed. A lot of folks like to break their stylesheets into header, content, sidebar, and footer components (and a few others). As I'm more of a SMACSS guy myself, I like to break things down into much finer categories (typography, buttons, textboxes, selectboxes, etc…).</li>
<li class="bodyText"></li>
</ul>
</div>
Use the + in your code to select the next match below your closing tag.
Simply nest the tags if you wish to select the child tag inside your .content-section.
Reference: w3 documentation
.content-section {
margin: 40px 0px;
& .siteTitleText {
margin-bottom: 50px;
}
& .headers {
margin-bottom: 30px;
}
img {
margin: 30px 0px;
}
ul, li { // If .content-section has a child named ul or li, do this:
margin: 100px;
}
}
I am a newbie to bootstrap. I have developed a weppage using bootstrap3. I'm using these two classes on the same element, but the css is not having any effect:
HTML:
<div class="col-md-4 auminascroll">
dfgdgdfgdfgsdfgh cxzvdzfhfdbfd fbfddf
</div>
<div class="col-md-4 auminascroll">fghfdghfdhdfhfdsh</div>
<div class="col-md-4 auminascroll">dfgdsgdsfg</div>
Css:
.col-md-4 .auminascroll {
height: 50px;
overflow-y: auto;
}
I am not getting a scroll when using above code. If I put height: 50px; overflow-y: auto; in a style tag, my code works fine. Why is this css not having an effect when using it with this bootstrap class? Is there any problem with my code?
Any help will be greatly appreciated!!!
You're nearly there! When using a selector to choose two classes there should be no space between the class names - they just need separating with a dot.
.col-md-4.auminascroll { /* no space between the two classes */
height: 50px;
overflow-y: auto;
}
Your code (where there's a space between the two classes: .class-a .class-b would actually look for an element of class-b inside and element of class-a.
<div class="col-md-4">
<div class="auminascroll">
</div>
</div>
You are using the wrong css selector. You need to use it like:
.col-md-4.auminascroll {
height: 50px;
overflow-y: auto;
}
I have an HTML snippet like below:
<div class="status">
<div class="status-icon green">
Online
</div>
</div>
and related css:
.status {
width: 100px;
}
.status-icon {
display: none;
}
My question is:
How can I write a css rule when .status{width=150px} then .status-icon{display: block;}?
Or is there a selector to target specific css rules like attribute selectors?
You cannot write a CSS rule where a property is set depending on whether the value of another property satisfies some condition. This seems to be what you are asking, even though you refer to CSS attributes. (There are no attributes in CSS; there are attribute selectors, but they refer to HTML or XML attributes.)
CSS as currently defined is simply a style sheet language with no programming features (or, let us say, with very limited programming-like features).
If you define status as a percentage (instead of fixed pixels) then you can do this with media queries
like so:
FIDDLE
.status {
width: 20%;
height: 100px;
background: blue;
}
.status-icon {
display: none;
color: white;
}
/* 20% of 750px = 150px */
#media (min-width: 750px) {
.status-icon
{
display: block;
}
}
So now when the viewport width hits 750px+ the status element will be 150px wide and with the media media query we can set .status-icon to block
Suppose I have the following css rule:
.blah { Rules }
and I use it as such
<div class="blah">
Now suppose, somewhere in my doc I need to add margin-bottom: 10px to one of these divs with class name blah so I can make it as specific as possible,
Should I declare it as
.blah.mar-bot-blah { margin-bottom: 10px; }
or
.blah .mar-bot-blah { margin-bottom: 10px; }
to use it as <div class="blah mar-bot-blah">
Declare it as:
.blah.mar-bot-blah { margin-bottom: 10px; }
It will match elements that have both the classes .mar-bot-blah and .blah.
If you want to make it really specific, I would use your first solution.
(Warning: IE6 Can't handle this!)
In most cases it should suffice to just use
.mar-bot-blah { margin-bottom: 10px; }
so you can re-use this setting in other classes as well.