I have some general style rules applied to the images on my website, for example:
border: 5px solid red;
I then want to style some of the <img> tags differently,
However inside a div in the page I don't want the <img> tags to pick up this extra styling, I'm trying to use the not selector like so:
HTML
<div class="no-overflow">
<img src="https://s3.amazonaws.com/uifaces/faces/twitter/rem/128.jpg">
<div class="comment-ctrl">
<img src="https://s3.amazonaws.com/uifaces/faces/twitter/rem/128.jpg">
</div>
</div>
LESS
.no-overflow:not(.comment-ctrl) {
img { border: 5px solid green; }
}
This styling just ends up being applied to all <img> tags, the not selector seems to be ignored. I have been testing in this codepen:
http://codepen.io/JoeHastings/pen/MYrVWK
Is there some CSS syntax that would make this work without changing the DOM itself?
It would probably be easier to use this
.no-overflow > img {
border: 5px solid green;
}
That way it only selects images that are a direct descendant of the class name and won't select images inside other elements.
Related
I have learned about display and float but is like <a> is already inline-block like for example: http://jsfiddle.net/CDe6a/1834/
But the <p> elements aren't, I don't understand this; the code is:
#parent {
border: solid 5px red;
}
.child {
border: solid 1px black;
float: left;
}
<div id="parent">
he
he
he
<p>
a
</p>
<p>
a
</p>
</div>
This for example, and as you can see is inline.
Every HTML element has a default display value depending on what type of element it is. The default display value for most elements is block or inline. <a> has a default of display: inline and <p> has a default of display: block.
You can check more here:
https://www.w3schools.com/html/html_blocks.asp
I am working on joomla template, and i make a custom button inside module, but the button css is override by module css. how can i fix this. help would be appreciated.
This is css i want for the button:
.button-middle {
background: url("../images/button-mid.gif") repeat-x scroll 0 0 transparent;
color: #FFFFFF;
float: left;
height: 27px;
line-height: 27px;
}
The code below has override button background :(
div.module div div div div, div.module_menu div div div div, div.module_text div div div div, div.module_grey div div div div {
background: none repeat scroll 0 0 transparent;
margin: 0;
overflow: hidden;
padding: 0;
}
template_css.css (line 342)
div.module div div div, div.module_menu div div div, div.module_text div div div, div.module_grey div div div {
background: url("../images/module_default/mod_tlb.png") no-repeat scroll left top transparent;
padding: 0 15px 15px;
}
template_css.css (line 304)
div.module div div, div.module_menu div div, div.module_text div div, div.module_grey div div {
background: url("../images/module_default/mod_trb.png") no-repeat scroll right top transparent;
padding: 0;
}
Add !important at the end of the background:
background: url("../images/button-mid.gif") repeat-x scroll 0 0 transparent !important;
Does the <link> declaration for your custom CSS file (if you're using one) come after Joomla's included CSS files within your <head> section? If you're not using a custom CSS file, do consider it - it means you can completely skirt similar issues by having your own selectors "trump" Joomla's by the simple virtue of having your CSS load last (thereby taking higher priority).
<!-- Joomla styles -->
<link rel="stylesheet" href="joomla.css" />
<!-- anything in here overrides anything in "joomla.css" -->
<link rel="stylesheet" href="custom_styles.css" />
(Omit the / from the closing brackets for HTML 5.)
If you've had this issue once, believe me that you'll have it again. (And again...)
If you have control over the markup you might be able to get away with adding an id attribute and then making your background selector #someid. As far as I can tell there were only class and element selectors, a single id selector might trump them all.
Disclaimer: im on the train and I can't test it right now. This could be totally incorrect. I also don't have the CSS specificity spec up to check either.
Edit:
Consider the following markup:
<div id="info" class="module">
<div>
<div>
<div>
<div>
<div>
<div>
<div class="test">
data
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
And then the following css:
.test { background-color: red; } /* 0,1,0 */
div.module div div div div div div { background-color: blue; } /* 0,1,7 */
#info .test { background-color: green; } /* 1,0,1 */
The word "data" will have a background color of green.
Even if you can't easily change the markup to add an id, try to find an id any where in the parental chain or you could write your selector as div.module .button-middle { ... }, which still classifies as a 0,2,1. As long as your style is more specific than the one you are trying to override, it will trump.
fiddle here.
And a couple of links on specificity: here and here.
I want to match the first generation division elements (all of them) but NOT any of THEIR children. So if I used the selector to apply a border 1 (as below visually) would gain the container however 2 (as below visually) would NOT gain the container. How do I construct that selector please?
<div id="container">
<div>1<div>2</div></div>
<div>1<div>2</div></div>
<div>1<div>2</div></div>
</div>
#container > div {
border: 1px solid #f0f;
}
The best way is using the immediate child selector (>):
#container > div {
border: 1px solid red;
}
(IE6 does not support this)
The selector for that is:
div#container > div
or just
#container > div
I really like the SelectORacle to help understand CSS selectors. More on Child Selectors from Eric Meyer.
UPDATE FOR Microsoft Internet Explorer 6
If support for > is a concern, as in the case of MSIE6, the traditional way I used to handle it was to set the styles for the first generation, then unset them for every other descendent generation. So, like this:
#container div { border: 1px solid #000; }
#container div div { border: none; }
#container div div div { border: none; }
#container div div div div { border: none; }
You do that with as many generations down as you need to do. In the above I allow 3 more levels of nesting (enough?) It is not pretty, but it is reliable.
Since one browser in particular (IE6) does not support the child selector >, you could use descendent selectors instead to add a border to the first descendant and remove it from the descendent's descendent.
HTML
<div id="container">
<div>1
<div>2</div>
</div>
<div>1
<div>2</div>
</div>
<div>1
<div>2</div>
</div>
</div>
CSS
#container div {
border:1px dashed grey;
}
#container div div {
border:none;
}
If IE6 is a browser you do need to support then the > selector as already answered is the simplest way to style the child.
I want to put padding on a css border. Pull it inside a div, away from the edge. Is this possible using css (css3 is fine, webkit).
Here is the design.
I did this by placing a div inside a div, then give a border to the inner div. I want to make the markup slim as posible so I want to use only one div if posible.
Thank you.
You should be able to do this with the CSS outline property:
<style>
.outer {
outline: 2px solid #CCC;
border: 1px solid #999;
background-color: #999;
}
</style>
<div class="outer">
example
</div>
Instead of borders, you may use outline property:
div{
height:300px;
width:500px;
background-color:lightblue;
outline:dashed;
outline-offset:-10px;
}
<div></div>
http://jsfiddle.net/H7KdA/
Padding around the border (which would separate it from the edge) is called the 'margin': for further details, see Box model.
Unfortunately, without adding another div, I don't think you can do this with just CSS.
The more complicated your design gets, the more likely you will need extraneous html tags.
Your other (also not great) option is an image background, or if it somehow makes you feel better, you can add elements client side with JQuery, thereby maintaining the "purity" of your server side files.
Best of luck.
You could do that by creating a inner div with the borders you want and a outer div with a display: table. Something like this:
<style>
.outer {
background: #ccc;
display: table;
width: 400px;
}
.inner {
border: 2px dashed #999;
height: 50px;
margin: 5px;
}
</style>
<div class="outer">
<div class="inner">
</div>
</div>
you can define a margin for the first child element based on the parent element selector. e.g.
.outer:first-child {
margin : 10px;
}
This way any element put inside the .outer will automatically have 10px margin.
If you want this to be applied to any direct child of the outer element use "> *" instead. e.g.
.outer > * {
margin : 10px;
}
No, that's not possible. Padding, margin and border are all parts of elements, you can't give a border padding or a margin a border.
Maybe if you post an example of what you're trying to do we can come up with alternate solutions?
-update-
Looking at your example I'm afraid it's still not possible, at least not with just one div. Im not a fan of divitis either, but the extra div probably is the best option in this case.
I have the following HTML:
<div class="selfClear" style="float: left; border: 1px solid black;">
...floated stuff in here...
</div>
<span style="margin-top: 10px; border: 1px solid purple;">hello world</span>
I'd like there to be a 10px gap between the div and span, per the margin-top. But, since the div above is floated, it won't render that way. The fix to make sure something clear's the DIV. To do that via pure CSS, it appears one should use the '::after' method of inserting content that is then set to clear:
.selfClear::after {
content: ".";
display: block;
height: 0px;
clear: both;
visibility: hidden;
}
.selfClear {
display: inline-block;
}
However, this doesn't quite do what I think it should be doing. If I don't include the height/visibility styles so that I can actually see the period as it is inserted, I see that it's actually rendering inside the div (the black border encloses it), rather than after the div (so it's between the div and span). Am I misunderstanding how this should be working?
EDIT:
Here's a simpler example:
CSS:
#theDiv {
border: 1px solid green;
}
#theDiv::after {
content: ".";
}
#theOtherDiv {
border: 1px solid orange;
}
HTML:
<div id="theDiv">
Hello
</div>
<div id="theOtherDiv">
World
</div>
That ends up placing a period after 'Hello' rather than after the div.
It appears that ::after and ::before are actually appended to the CONTENTS of the element, not the element itself. Is that correct?
Yes, it appends to the content of the selected element. You could try wrapping the div then appending after the wrapper div, but that defeats the whole purpose of using :after in the first place.
You could also try setting the enclosing div to 'overflow: auto'. That works everywhere.
I would suggest using clearfix - it's a lot simpler, you just set up a surronding with a class of clearfix.
See this example.