Develop Reference

Best way to apply Style to every other div when an outside style sheet that I have no access to is coming into play?

I'm using BXSlider and attempting to change the background of every even iteration of the slider. The problem is that a css sheet that I do not have access to is affecting all sliders on the page.
Context-
<div class="bx-wrapper">
<div class="bx-viewport">
<div class="bx-slider">
</div>
</div>
</div>
Bx-wrapper and Bx-viewport are added automatically via the bxslider library.
The css sheet (that I have no access to) has the background set to #fff-
.bx-wrapper .bx-viewport {
background: #fff;
}
I am changing the background of the slider with -
.bx-wrapper .bx-viewport:nth-child(even){
background-color: rgb(245,245,245);
}
My main problem is that the original #fff takes precedence and I can only see the above css working when I un-check that style in dev tools. What do you all think the best way to ensure that the above css takes precedence?

It sounds like your style is just being overridden by the existing stylesheet, correct?
To give your style priority over the existing stylesheet, your CSS scoping should be as specific as possible and, if necessary, contain the !important property.
For example, instead of having...
.bx-wrapper .bx-viewport:nth-child(even){
background-color: rgb(245,245,245);
}
... you might want to try...
html body .bx-wrapper .bx-viewport:nth-child(even){ /*or whatever the full scope path to your elements would be*/
background-color: rgb(245,245,245) !important;
}
I hope that's what you're looking for.

How can I hide browser broken default image added on empty src <img /> with css? [duplicate]

I'd like to give broken/errored images some extra CSS:
img:error {
max-width: 20px;
max-height: 20px;
}
but that doesn't work. Is there a way with pure CSS to do this? Is there an img pseudo selector for this? Or even better: a dirty hack that works?
I've looked around, but nobody seems to be wondering =)
(Yes, I know JS can do it and I know how; no need to mention it.)

There is no way in CSS specs or drafts, but Firefox has a proprietary selector (pseudo-class) :-moz-broken. Its documentation is very concise and it says “intended for use mainly by theme developers”, but it can be used e.g. as follows:
:-moz-broken { outline: solid red }
:-moz-broken:after { content: " (broken image)" }
Although the documentation says that it “matches elements representing broken image links”, it actually matches broken images (an img element where the src attribute does not refer to an image), whether they are links or not. Presumably, “links” really means “references” here.
CSS 2.1 says: “This specification does not fully define the interaction of :before and :after with replaced elements (such as IMG in HTML). This will be defined in more detail in a future specification.” But Selectors Level 3 (CSS3 Selectors) just says about them: “They are explained in CSS 2.1.” In practice, browsers handle them differently. Oddly enough, Firefox supports :-moz-broken:after but ignores :-moz-broken:before. It does not support either of these pseudo-elements for normal images, but img:after, too, is supported for a broken image (i.e., the specified content appears after the alt attribute value).

For this, you should use the alt attribute, wich shows up if link is broken and you can as well style background of image :
example:
img {
display:inline-block;
vertical-align:top;
min-height:50px;
min-width:300px;
line-height:50px;
text-align:center;
background:
linear-gradient(to bottom,
blue,
orange,
green);
font-size:2em;
box-shadow:inset 0 0 0 3px;
}
These style will be hidden when image is shown.
http://codepen.io/anon/pen/Kxipq
As you can see, we do not check for broken links, but offer alternative , usefull for blind people , searchengines, whatever , and some extra styles finishes it :)
some extra Image alt attribute best practices

<img src="not_found_image.png" onerror='this.style.display = "none"' />
from:
https://www.geeksforgeeks.org/how-to-hide-image-not-found-icon-when-source-image-is-not-found/

NO there is no :error pseudo class. This is a good site for a comprehensive list of what is available:
http://reference.sitepoint.com/css/css3psuedoclasses
July, 2015 EDIT/ADDITION:
(Thank you Rudie)
https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes

No. There is nothing in CSS selectors level 2.1 or level 3 that allows targeting an image like that.

This is close:
<style>
img[data-broken="true"] {
visibility: hidden;
}
</style>
<img src="none.webp" onerror="this.setAttribute('data-broken', 'true')">
Strictly speaking, it sill uses JavaScript. But the JS is self contained in the image HTML code.

Dynamical CSS image URLs within Javascript

I have a button that can have a focus css class associated with it and I instantiate this at runtime within Javascript.
This is all provided by a bespoke Javascript framework so can not be changed.
Normally I would provided 2 additional CSS class for this button,
e.g.
btn { background-image: url(/btn.png);}
btn.focus { background-image: url(/btn-focus.png);}
This will give me 2 different images based on whether the button is 'focused' or not.
The problem I have now is that the image urls are dynamically loaded at runtime, and there is no way of specifying them with a static CSS file.
I'm thinking one possible solution is to 'somehow' generate a new style element with the btn and btn.focus classes in it (with the dynamic URLs) and either append it to the head or embedded it in the markup prior to instantation of the Button itself. This solutions doesn't seem ideal.
Can anyone suggest anything else?
Thanks in advance.

If your case is specifically about images that represent different states of a single object (e.g. focused or non-focused state of a button) then it's a good idea to use sprites.
That is creating a single image with all button states and loading it (dynamically if you want).
Then you can write a universal rule in your CSS:
btn {background-position: 0 0;}
btn.focus {background-position: 0 -20px;} /* 20px is the height of your button*/

Are you saying this doesn't work because their css styles "inline" ones are overriding your ones? If so then do this instead
btn { background-image: url(/btn.png) !important;}
btn.focus { background-image: url(/btn-focus.png) !important;}

Dynamic picture depends on attribute

My target is to have a list of file names, and near every item a picture of that file extension will appear next to it.
there is a nice way to do that:
p[icon^=".gif"]
{
background: url(images/gif.png) no-repeat center left)
}
this checks if the icon attribute of the 'p' element ends with .gif. if it does,
it applies the given style to that element.
but instead of define every file type, i want it to be generic since i have a folder with icons in this format: {file-extansion}.png
in case there is no matching file with the given extansion or there is no file extansion, there will be a default path of "default.png".
There is an option to do that or part of that? if no, what way you advise me doing that?
By the way I am not a css/javascript expert so please given enough details so I can understand your answers.

You can use jQuery library for this:
HTML
<p data-ext=".gif">Text</p>
<p data-ext=".png">Text</p>
<p data-ext=".jpg">Text</p>
CSS
p {
background-repeat: no-repeat;
background-position: 0 50%;
}
JavaScript
$("p[data-ext]").each(function() {
var ext = $(this).data("ext").substring(1);
$(this).css("background-image", "url(images/" + ext + ".png)");
});
It works so that you add data-ext attribute to each p (or whatever) tag. jQuery selects all p tags which have data-ext attribute, then gets attribute value, and changes background-image of each element.
DEMO: http://jsfiddle.net/AEsx4/

Using pure CSS, you can't dynamically reference attributes in the URL, but you can make them content. Here are some lame workarounds using pure CSS and finally a wishful thinking approach :(
Use a class
<div class="jpg">
</div>
/* css */
.jpg {
background: url("/img/jpg.jpg");
}
This works great, but you need one class per extension.
Use an attribute selector
<div data-ext="jpg"></div>
div[data-ext=jpg] {
background: url(/img/jpg.jpg);
}
For more on this approach see:
http://css-tricks.com/attribute-selectors/
I used data-ext, because in HTML you're not really supposed to add random tags, so the HTML creators gave us data-* which is valid HTML5 and we can do whatever want with it. Either way, you need to create a new CSS selector for every extension. Not good.
Closest you can get with pure css
<div data-ext="jpg"></div>
div:after {
content: attr(data-ext);
}
You will see the name of the extension next to the div. This almost works, but it's not quite good enough.
More about CSS Functions: http://www.suburban-glory.com/blog?page=130
What you actually want
<div data-ext="jpg"></div>
div:after {
content: url("/img/jpg." attr(data-ext));
}
Sadly this doesn't appear to work at the moment, but boy would it be awesome.

Random Header image on Page Refresh, CSS jquery javascript?

I need help finding code for my web page. I have a "customize.css" page which has code for loading the header image. But the header loads on a "header.asp", which is then loaded on the index page "default.asp". I guess my question is what can I use to generate, one of four of the header images I have created, randomly on each page reload/refresh for a header?
This code is from my "customize.css" file. After I get the code, what do I put in the "background-image:" for it to load to the page?
#header {
color: #FFF;
height: 350px;
background-color: transparent;
background-image: WHAT DO I PUT IN HERE?;
background-position: left top;
background-repeat: no-repeat;
}
I have searched the net forum after forum for the past week in search of an answer but have yet to get one. Anyone have any ideas? Thanks

I'd go simple. Define 4 different classes, each with a different background image. In your header ASP script, select one of the 4 classes at random, and output that class into your code. It's simple, the images will cache as they are displayed, and because you avoid JavaScript, it works for 100% of browsers/users. For a small project, it's easy to maintain.
Now, if you get into 100 different background images, you would want to do something different.

If it were me, I would create a separate web service to serve a random image. I would use PHP, but I assume you can do it in ASP).
#header {
background-image: url(/yourWebService.asp);
}
Have the service select one of the images at random, and return it accordingly.

The only way of doing that in the css is by calling a URL that returns the random image. Something like:
#header { color: #FFF; height: 350px; background-color: transparent; background-image: "/loadimage"; background-position: left top; background-repeat: no-repeat; }
But then you must code a service at /loadimage that returns the image.
It will be much more easy change the image at the page load via javascript. Assuming you have the images img0.jpg, img1.jpg, img2.jpg and img3.jpg at the images directory, you could do:
You can do:
<body onload="document.body.background = '/images/img'+Math.floor(Math.random()*4)+'.jpg';" />

See the random image header of this page
I am using a specify class for change the background-position css property.