Why does id not override class in bootstrap? - html

I am working on front-end web development and keep running into the same issue. I am using bootstrap styling rules (bootstrap.css) with a few modifications.
HTML
<div class="container">
<div class="jumbotron">
<button type="button" id="jnav">Restricted</button>
</div>
</div>
style.css
#jnav{
opacity: 1;
}
From bootstrap.css
.jumbotron {
opacity: 0.75;
}
Basically, I wanted to use ID to override the opacity, so that the button would have an opacity of 1 while the rest of the jumbotron would have an opacity of 0.75. The problem is that the button's opacity is remaining at 0.75 (so it is annoyingly the same as the jumbotron background)! Does anyone know what's up? Is there something basic that I am missing? I thought that id was a more specific attribute and would override class styles.

Opacity doesn't inherit in the same way as things like color or background. Setting the opacity of an element makes that element and everything it contains render at that opacity relative to whatever is behind it. The opacity property of chile element then compunds like #techfoobar said. You can read more here.
Basically, what you need to do is set the opacity for each child of .jumbotron separately while leaving the opacity of .jumbotron at 1.

It's hard to say given the limited information, but it sounds like you're trying to place a button (#jnav) inside the jumbotron which has an opacity. Since the jumbotron has an opacity of 0.75, everything inside of it will follow that same opacity regardless of any other rules. This is not a problem with class/ID specificity or bootstrap, more just a general styling nuance.
Basically what Jcubed just said above.

Typically the selectors used in Bootstrap.css are very specific. The selector might be something like body > div > .jumbotron which is very specific. In this case simply using the element Id won't override the css. You will need to match the specificity or be more specific. For example body > div > #jnav would effectively override the css as they are both equally specific.
This of course assumes that the css you want to use comes after the css you are replacing. Either after it in the same css file or a seperate css file included after the base Bootstrap.css.
If worst comes to absolutely worst, then you can use:
#jnav{
opacity: 1 !important;
}
But this shouldn't need to happen unless you are absolutely desperate.

They do not override each other. They both applied, but #jnav is within .jumbotron. So .jumbotron's opacity will apply on top of #jnav's opacity.
If you just want the effect, you should use rgba
Example:
#jnav{
background: rgba(111, 111, 111, 0.1);
}
The last index is the opacity of the background, and it will not overlap with your font.

#jnav does have an opacity of 1. But that would be, in a sense, relative to its parent .jumbotron with an opacity of 0.75.
As techfoobar mentions, opacity is compounded with the inherited value. And hence, #jnav's opacity will effectively be 1 * 0.75.
Here's what MDN has to say:
The value applies to the element as a whole, including its contents, even though the value is not inherited by child elements. Thus, an element and its contained children all have the same opacity relative to the element's background, even if the element and its children have different opacities relative to one another.
View this question, if you want to achieve a transparent background but not the content effect.

Related

Is it possible to prevent the opacity of HTML elements from affecting the opacity of the TAB helpers? [duplicate]

This question already has answers here:
I do not want to inherit the child opacity from the parent in CSS
(18 answers)
Closed 1 year ago.
(I wrote "tab helpers" in the title, which I guess is an invented terminology. Please, correct me.)
In the snippet below there's two checkboxes, one of which has opacity reduced to 20%.
.checkbox1 {
opacity: 100%;
}
.checkbox2 {
opacity: 20%;
}
<div class="checkbox1">
<input type="checkbox" id="myCheck1">
</div>
<div class="checkbox2">
<input type="checkbox" id="myCheck2">
</div>
If I tab-select the second one, I see this (well, not the stuff in blue):
Is there anyway to have that yellow thing retain 100% opacity even if the element's opacity is set via CSS to other than 100%?
I guess this might be all up to the browser, but I'm really not sure.
The yellow stroke is the outline and is notoriously hard to style since you're correct that it is browser-specific. User-defined styles can and often are disregarded wholesale by the browser.
As part of the element, it is affected by the value of the element's opacity property. This means you cannot set its opacity directly.
If you want to make the element semi-transparent without affecting the outline, you should style the other parts of the element with RGBA colors so you can set the transparency per-part. (see: I do not want to inherit the child opacity from the parent in CSS or #Rohit Azad Malik's answer to How to apply an opacity without affecting a child element with html/css?).
There are ways to style a checkbox (or other input types), but they're browser-specific.

Why does opacity property carry over to an "irrelevant" element? [duplicate]

I'm coding a "popup window" in JavaScript and I've come across an interesting thing:
The navy square under the popup window is visible even though I would expect it to be hidden. The popup was added after the square, so it should be on the top.
CSS opacity property of the navy square is 0.3. From what I've tried, it seems that every number from the interval (0,1) would yield the same result. If I change it to 1, then it behaves as expected (i.e. the part of the square under the popup is hidden).
I've tried to set the z-index property to 10 for the square and 100 for the popup, but it doesn't change anything.
What am I missing? Why is part of square displayed?
Tested browsers:
Firefox 3.6.x
Chrome 4
This is not a bug and is actually how it's supposed to work. It's a bit confusing as the elaborate description of Stacking Contexts doesn't mention anything about it. However, the visual formatting module links to the color module where this particular gotcha can be found (emphasis mine):
Since an element with opacity less than 1 is composited from a single
offscreen image, content outside of it cannot be layered in z-order
between pieces of content inside of it. For the same reason,
implementations must create a new stacking context for any element
with opacity less than 1. If an element with opacity less than 1 is
not positioned, implementations must paint the layer it creates,
within its parent stacking context, at the same stacking order that
would be used if it were a positioned element with ‘z-index: 0’ and
‘opacity: 1’. If an element with opacity less than 1 is positioned,
the ‘z-index’ property applies as described in [CSS21], except that
‘auto’ is treated as ‘0’ since a new stacking context is always
created. See section 9.9 and Appendix E of [CSS21] for more
information on stacking contexts. The rules in this paragraph do not
apply to SVG elements, since SVG has its own rendering model ([SVG11],
Chapter 3).
It's not a problem of opacity being more important than z-index, rather than z-index being relative to their stacking context (see z-index in the CSS2 specification).
In other words, z-index are only significant within the context of a positioned ancestor (whether its relative, absolute or fixed). What you need to do to fix your problem is add a position: relative; to the element that contain both your popup and your navy square, and probably add it a z-index: 1; . Seeing your screenshot it will probably be a top element such as a wrapper div.
Workaround for two elements, like divs: add a 0.99 opacity to your top element, and the order of both is reestablished.
opacity: 0.99;
An alternative to using opacity, is to use a transparent colour (with an alpha value)
So, rather than using
{
background: gray;
opacity: 0.5;
}
You could try
{
background: rgba(128,128,128,0.5);
}
It isn't identical, but I was encountering the same issue you were having, and the above fixed it.
Example code might be needed to debug this problem.
You might put overflow: hidden and possibly position: relative in a DIV which surrounds all the editor objects to try to force the elements to only be drawn within that DIV, e.g:
<div style="overflow: hidden; position: relative">
(Editor object buttons go here)
</div>
As a last resort, you could also try a iframe in between the two elements to try to stop them seeping through.
You might try to set the popup window's DIV like this using !important so the style doesn't change on applying new style or class:
background-color: white !important;
z-index: 100 !important;
opacity: 1.0 !important;
Then, make new CSS class:
.PopupElement
{
z-index: inherited;
opacity: inherited;
}
And add class to all elements in the window, like this for example:
<input value="posx" class="some_class PopupElement"/>
My guess is that this would work, since there is no priority in applying CSS attributes... as far as I know. =)
I had the same issue. Using rgba instead of color/opacity solved my problem. Working with LESS (in the Bootstrap framework), the fade() function did the conversion for me.
Although #Guillaume Esquevin already gave a great answer, I will try to expand on it in case someone ignores what a stacking context is (like I did).
As you can read here, there is something called stacking context, which refers to a group of elements sharing a parent that move together in the stack. An example could be a div and all its children.
There are three ways to create a stacking context: in the root of the document (the html element), by positioning the parent element, and by changing the opacity of the parent to something lower than 1.
Then, if you have a div with opacity lower than 1 and you want some sibling element of this div to appear behind it (and its children), you can create a new stacking context on such sibling by setting its position to relative or by changing its opacity as well.

CSS 80% opacity on strong tag within paragraph but if no strong tag 100%

So an agency has sent me some code and I coded site with using their method in CSS with changing the opacity to 80% for <p> tags, however my client has picked this up and so much has been built.
I have added in p { opacity(0.8) } and changes paragraph tags to the same colour however I have some titles like <p><strong>text</strong></p> which are also now fading so my question is (without a load of work to change) is it possible in CSS that I make <p> that contain a strong tag use 100% ?
Rough example below:
HTML
<p><strong>test title</strong></p>
<p>test test here</p>
CSS:
p { opacity(0.8) }
However I need to ensure that p > strong remains with no opacity change so 100% in this case.
I know it's a sloppy fix but there's no time to re-do this all or set own classes for colour change on everything.
For example: http://jsfiddle.net/8du1d12o/
No, you can't. If the parent is set to 80% opacity, any child element, at most, will be only 80% opaque. (I would ask why paragraphs are set to an opacity other than 1 to begin with, though...)
One potential workaround is to not use opacity, but RGBA. You could do this:
p { color: rgba(0,0,0,.8) } /* 80% black */
p strong { color: rgba(0,0,0,1) } /* 100% black */
(PS, as stated in my comment, if these are truly titles, the markup should be using header tags--not paragraph tags)
I've looked a bit more into it and it seems like we would need to use a parent selector which css doesnt have :/
you might need to add a class to the paragraph elements or use Jquery to do a special selector to apply your desired styles
I believe the issue has to do with how opacity works, it seems to make everythings inside the div (or whatever level you set it opaque) Therefore I would think that putting the specific span tag like mentioned above would work.
Also note for people how have a similar problem setting backgrounds you can use the code below, it DOES NOT MAKE the text transparent, only the background
background-color: rgba(255, 0, 0, 0.3);
p { opacity(0.8);background-color:red; }
p strong { background-color:blue; }

Opacity only at a particular area

I want to give opacity for the div only at the bottom left corner.
Is it possible? how?
<div id="right_img"></div>
css
#right_img
{
float:right;
width:600px;
height:400px;
margin-top:100px;
background:url(../images/assets/sobrf-maria-page.jpg) no-repeat bottom center;
opacity:0.6;
filter:alpha(opacity=60);
}
If I give opacity to the complete div, image clarity will be lost.
Use a PNG image instead and make the transparency part of the image?
Giving Opacity to an element always affects the whole element and all of its child-elements too. If you want to give only one of it's children the opacity property, you have to declare it directly on that element. Sometimes you have to introduce some helper Elements to achieve the effect you want.
Exception is the opacity you declare on colors which don't get inherited to the child elements. With the new rgba() declaration, (the fourth parameter is the opacity of the color), you can achieve effect like having a "transparent" div (transparent background) but the font is completely opaque.
In your case it might be sufficient (interpreting your answer - it wasn't quite clear) to just use the normal background-declaration with this rgba background-color:
#right_img{
background:rgba(x,y,z,0.6) url(../images/assets/sobrf-maria-page.jpg) no-repeat bottom center;
}
with x,y,z = 0...255 and a = 0...1
Note, that the rgba() declaration is not supported in older IEs (even IE8!). You need a filter to support these. Luckily there is one:
filter:progid:DXImageTransform.Microsoft.gradient(
startColorstr=#aaxxyyzz,
endColorstr =#aaxxyyzz);
where the first parameter (a) is the opacity with 0% = 00 and 100% = FF. And xx,yy,zz = 00...FF.

Fade background with transparent curtain

It is quite popular question, I think.
I am looking for crossbrowser CSS solution for black opaque layer. Which will hide all stuff under it.
My example: http://jsfiddle.net/pb9jv/. But it is not crossbrowser. (IE 6+ is the pain in my ass).
Try adding this the the CSS style you apply to the fadeover (In your example : #black)
filter: alpha(opacity = 50);
EDIT : You want it to be opaque or transparent like the given example?
Have a look at this, it does work on IE 6
Use a simple div and apply a background-image to it with a 1px size image of your color. Just a simple png with your black color.
.overlay
{
background-image:url('myoverlaycolor.png');
}
It will repeat itself across the complete div.
Edit
Come to think of it, IE6 doesn't support png right? Maybe you could just take a look in sources like slimbox.
David is right - that is the syntax.
However your fiddle will not work in IE6 since you have no size values.
Here is an example:
http://jsfiddle.net/4Aw4Q/
If you remove the sizing the element will not show.
#Marnix If you use proper filters IE6 does support PNG. Try this for starters
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/pngimage.png', sizingMethod='scale');
Set the above filter in as a class for the span or div element containing the image and make sure the width and the height of the image are set.
Set this class also for the span or div element containing the image.
.PNGTrans img{
background: transparent;
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
}
So the above to classes will have to be called for the parent containing the png image.
#fl00r : Have a div element with higher z-index with screen.width and screen.height as its widht and height respectively. You can either use an image or you can play with opacity filters.