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
Related
Lets you say you have two media queries on an element that both match. How do you know which one wins?
For example, let's say you have a media query that sets a rectangle to be red at LESS than or equal to 500 pixels and you a media query that makes it blue at MORE than or EQUAL to 500 pixels. Which one wins? And let's say you have a phone that is 500 pixels wide.
hr {
width: 400px;
left: 10px;
top: 0;
position: absolute;
}
.rect {
left: 10px;
position: absolute;
top: 20px;
right: 10px;
}
#media (max-width: 400px) {
.rect {
background-color: lightgray;
}
}
/* larger content */
#media (min-width: 400px) {
.rect {
background-color: lightblue;
}
}
<div class="rect">
Here is a div
</div>
<hr width="500px">
I would like to setup proper media break points. Do I need to rewrite them? Should they be min-width 501px and so on?
Normally it's the style declaration that comes last in the code that "wins" (is applied!). You can set !important on a style declaration, but IMHO that is toss-up and sometimes doesn't work. I 'think' id styles will have more importance over class styles, but I do know you can set multiple class name styles more influential.
Code not tested:
#less_important {
background : green;
width : 50px;
height : 50px;
}
.blue {
background : blue;
width : 50px;
height : 50px;
}
.red {
background : red;
border : 1px solid yellow;
}
<html>
<div id = "less_important" class = "blue">
</div>
<div class = "blue red">
</div>
<div class = "red blue">
</div>
</html>
Move the style .red and .blue in the code and see what happens to understand
CSS mean Cascading Style Sheets.
Definition of cascade:
"Something arranged or occurring in a series or in a succession of stages so that each stage derives from or acts upon the product of the preceding."
So, whatever comes after in the cascade will overwrite the previous.
Yes, you should set the one with min-width to 401.
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>
I need a media query (or similar) using pure CSS, HTML or possibly LESS (as long althogh pre-compiled won't work) to apply a particular class to an ID depending on the screen height. I'm setting classes defined by Add2Any - not css properties.
jsfiddle
What I want to do is set the div #add2any to this for small screens.
<div id="add2any" class="a2a_kit a2a_default_style">
Otherwise I want this:
<div id="add2any" class="a2a_kit a2a_kit_size_32 a2a_default_style">
Is this possible, and how?
Looking for a non-javascript/not Jquery solution to avoid time lag and having a <div> for each style and showing only the relevant one.
Background
The idea is to change the layout and size of the AddToAny bar for small screens, so instead of 32px images it displays a totally different style of compact bar, with less buttons, and using AddToAny's classes means future changes they make would not be dependent on fixed css in my stylesheets. Browser compatibility is important.
CSS so far
#media screen and (max-height: 430px) {
.a2a_button_google_plus, .a2a_button_pinterest, .a2a_button_print { display:none;}
#add2any a, hr#add2any, hr#add2any a, .a2a_divider { font-size: 15px; padding-top:2px; padding-bottom:-2px; }
.a2a_divider { top:5px ; position: relative}
}
Edit
Unable to find solution from any of these, I'm using foundation framework.
conditional CSS based upon div not screen
Toggle mobile view in Foundation using CSS class or JS
How to toggle class using pure javascript in html
**Edit 2 **
Suggestions of using Less or Sass from this question seem like overkill, since the solution would be needed on every page.
Self-hosting the script and adding some javacript to it might be a better choice, the class names look certain to remain the same even if the script changes since all Customize instructions encourage direct use of AddToAny's class names.
Edited
If you have this html:
<div class="a2a_kit a2a_default_style">
<div class="a2a_kit a2a_kit_size_32 a2a_default_style">
You can make a media query like this:
/* first state */
.a2a_kit { display: block; }
.a2a_kit.a2a_kit_size_32 { display: none; }
#media screen and (max-height: 430px) {
/* reverse behaviour on max-height 430 px */
.a2a_kit { display: none; }
.a2a_kit.a2a_kit_size_32 { display: block; }
}
You just need to set up modified styles in your media queries:
#add2any {
/* any styles you want to apply all the time */
background-color: blue;
width: 100px;
color: white;
}
#media (min-width: 420px) and (max-width: 760px) {
/* styles when screen is greater than 420px wide but less than 760px */
/* omitting the 'and (max-width: 760px)' would cause these styles to apply at any width above 420px unless overridden by another media query */
#div1 {
background-color: red;
width: 300px;
color: yellow;
}
}
#media (min-width: 760px) {
/* styles when screen is greater than 760px wide */
#div1 {
background-color: green;
width: 600px;
}
}
JSFiddle Demo
*if you don't want to style based on the ID, you can add a unique class and style that
I have a division placed on the bottom of the page. I put an image into this division, but I don't know how to modify the image. The problem may be, that the inline style for <img> is setting modification rules for all images. I have an inline style sheet that has this code and HTML code for <div>.
My CSS code looks like this:
<style type="text/css">
img {
image-align: center;
padding: 10px;
height: 200px;
width: 140px;
}
div {
position: absolute;
right: 10px;
}
</style>
And my HTML code is like that:
<div align="center" >
<img src="images/music_banner.jpg" >
</div>
you can do this:
div img{
}
or give the div a name and do this
#div img{
}
or you give the img an id as below
<div>
<img id="mg"/>
</div>
Use id as #mg in CSS code.
or you can do as define class name in img tag.
<div>
<img class="mg"/>
</div>
Use class as .mg in CSS Code.
You might try learning a little bit more about CSS selectors: these are the rules that tell the browser which element you'd like to apply the following rules to.
I would recommend Code Academy for an easy to follow course. You can skip down to the CSS section if you are already comfortable with HTML.
Note: if you google CSS, you'll get "w3schools" as the first results. That website is generally derided on Stack Overflow. I don't know if it's really that bad, but I tend to skip it just because everyone else has a bad opinion of it. Your call if you find it helpful of course.
I should note that I like to use the W3C (World Wide Web Consortium) website for reference, as they're the ones trying to make everything standard. It is a pretty technical read, though.
Create a div element in your HTML code:
<div class="parent">
<img src="image">
</div>
Than add this to your CSS code:
.parent {
width: 42px; /* I took the width from your post and placed it in css */
height: 42px;
}
/* This will style any <img> element in .parent div */
.parent img {
height: 100%;
width: 100%;
}
Does anyone know how can I control the image source from the CSS?
I need to be able to change the image src from the CSS. I have loop printing < img id=.. > tags, and for every id it different image. I want to be able to set the source by its id from the style css area.
Does anyone know how to do this?
This is not possible: The image's source is part of the markup, not CSS.
The only workaround would be having div elements with background-image properties instead. Those you could set from within the style sheet:
<div id="image1"></div>
#image1 { width: 100px; height: 50px; background-image: url(image.gif); }
However, with this method you lose all the img tag's advantages like
The ability to set an alt text
Resizing
Printing (most browsers don't print background images)
Search engine indexing (probably)
the only other alternative is by using JavaScript, but that obviously won't work if JavaScript is disabled, which makes it a no-no in my view.
This is now possible with CSS3 using the Content style.
I use this to swap images within a slider based on window size through media queries.
Edit: When I originally posted this, I was unaware that it only worked in Webkit at the moment. But I doubt it will take long before it gains more functionality across browsers.
HTML
<img class="img1" src="image.jpg">
CSS
#media (min-width: 768px) {
.img1 {
content: url(image.jpg);
}
}
#media (max-width: 767px){
.img1 {
content: url(new-image.jpg);
}
}
That is not possible with CSS.
However, this is very easy with Javascript:
document.getElementById("IdOfImage").src = "SourceOfImage";
You cannot really do that, however, if you do need to do that using CSS, you can do it for two images with the same size like this:
<style>
img {
width:0;
height:0;
display:block;
background: url('2.png') no-repeat bottom left;
padding-left:196px;
padding-bottom:187px;
}
</style>
<img src="1.png">
Only tested it in FF3.6 though.
I found this article that might be useful. It actually changes background of an image
here is the example in case website goes missing:
HTML
<html>
<body>
<div class="header">
<img class="banner" src="http://notrealdomain1.com/banner.png">
</div>
</body>
</html>
CSS
/* All in one selector */
.banner {
display: block;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: url(http://notrealdomain2.com/newbanner.png) no-repeat;
width: 180px; /* Width of new image */
height: 236px; /* Height of new image */
padding-left: 180px; /* Equal to width of new image */
}
If you don't want to use backgrounds nor use javascript, you layer 2 images with different src on top of each other (using absolute positioning) and use CSS to hide one or another. Visually it will be the same then changing the src.