Here is my HTML structure:
p {
margin: 0;
border: 1px solid;
}
small {
display: block;
margin-top: 40px;
border: 1px solid #999;
}
small + span {
display: block;
border: 1px solid #ccc;
}
<p>content</p>
<small>tags</small>
<span>edit</span>
All fine. Sometimes <small> element is empty. Something like this:
<p>content</p>
<small></small>
<span></span>
In this case, I want to remove the margin-top of <small>.
Is that possible using pure CSS? It should be noted I don't want to use JS.
You could try using a combination of :not and :empty pseudo-classes.
small:not(:empty) {
margin-top: 40px;
}
The negation CSS pseudo-class, :not(X), is a functional notation taking a simple selector X as an argument. It matches an element that is not represented by the argument. X must not contain another negation selector. -MDN
The :empty pseudo-class represents any element that has no children at all. Only element nodes and text (including whitespace) are considered. Comments or processing instructions do not affect whether an element is considered empty or not. -MDN
Related
How can I possibly apply a style to a parent div but not the <strong> child. I've tried various ways of :not selector but none of my tries succeeded.
Here's what I came up with
.total:not(strong) {
color: gray;
}
<div class="total">Baloons <strong>$3.75</strong></div>
<div class="total">Pens <strong>$1.99</strong></div>
I know I can do apply the styles to those separately but I am looking for a :not way of doing it so I can do it on one line.
I also know I can give <strong> a class and do .total:not(.strong-class) but why doesn't it work the way I try it originally?
The :not rule refers to the target element. Your rule .total:not(strong) is translated to apply the styles (color: gray) to an element with class .total, which is not a strong node (the <strong> tag). Since the .total node is div, the rule still applies.
Reset the strong's color to initial or choose a different color:
.total {
color: gray;
}
.total strong {
color: initial;
}
<div class="total">Baloons <strong>$3.75</strong></div>
<div class="total">Pens <strong>$1.99</strong></div>
Check the default css of color in the element strong.
.total:not(strong) { works fine, but the default color is gray too!
:not
*{color:blue}
.total:not(strong) {
color: gray;
}
<div class="total">Baloons <strong>$3.75</strong></div>
<div class="total">Pens <strong>$1.99</strong></div>
You can use this code
body {
padding: 0;
margin: 0;
}
.total {
color: red;
}
.total strong {
color: gray;
}
<div class="total">Baloons <strong>$3.75</strong></div>
<div class="total">Pens <strong>$1.99</strong></div>
Im working on a html linter using css.
Reference: https://bitsofco.de/linting-html-using-css/
I like the idea of highlighting elements that have inline styles like so:
*[style] {
color: red !important;
border: 5px solid red !important;
}
However, I do have certain instances where I have to use inline styles, ie canvas elements.
How do I use the :not selector with the *?
Can I have multiple :nots, ie :not(canvas):not(form), etc
What you have works and excludes the canvas. And yes, you can chain multiple :not()s like that.
* {
border: 1px solid black;
}
*[style]:not(canvas):not(form) {
color: red !important;
border: 5px solid red !important;
}
<canvas style="foo">canvas</canvas>
<form style="foo">form</form>
<div style="foo">div</div>
the :not() rule matches anything not matching the subrule. The subrule is a valid css selector. writing [canvas] will match any element with a canvas attribute, so this isn't what you want.
The correct usage is:
*[style]:not(canvas):not(form)
Say I have a
<a class="myclass" href="foo.htm">Click Here</a>
and in css something like this:
.myclass
{
border: 2px solid #000;
padding: 1em;
}
so the <a> looks like a button but it only operates when clicked on the text, not in the whole box. How can I make so that the box also "catches" onClick?
Block will not work well unless you float the element and give it a fixed width. I think "inline-block" would work better.
.myclass{
display: inline-block;
border: 2px solid #000;
padding: 1em;
}
You can see it in action here: http://jsfiddle.net/2tmzL/
Browser support for inline-block is pretty good: http://caniuse.com/inline-block
Wrap the anchor tag around another container element
<a class=".." href=".."><div>Click here</div><a>
< a > is an inline , you have to transform it to a block, try this
.myclass:
{
display:block;
border: 2px solid #000;
padding: 1em;
}
You need to set the css property display: block or inline-block (depending the case...) for your a element.
I seem to be able to click the entire link. Make sure you remove : after .myclass. Also if it's still not working you may like to try adding display:block;
Alternatively in html5 you can wrap the a tag around a block element. This will work in older html though it's not correct.
.myclass
{
border: 2px solid #000;
padding: 1em;
display:block;
}
The issue is that a's are inline elements, and padding doesn't work the way we expect with inline elements. Change the a's to a block level element, and everything should work as you expect (note the removal of the ":" in the CSS declaration, that shouldn't be there):
.myclass {
display: block;
border: 2px solid #000;
padding: 1em;
}
How do I apply a hover effect on an a element, but not to an a element with the class active?
a:hover(not: .active)
Seems something is missing.
The functional notation is on :not(), not :hover:
a:not(.active):hover
If you prefer to put :hover first, that's fine:
a:hover:not(.active)
It doesn't matter which pseudo-class comes first or last; either way, the selector works the same. It just happens to be my personal convention to put :hover last as I tend to place user-interaction pseudo-classes behind structural pseudo-classes.
You have the option of using the not() selector.
a:not(.active):hover { ... }
However, this may not work in all browsers, as not all browsers implement CSS3 features.
If you are targeting a large audience and want to support older browsers, the best way would be to define a style for the .active:hover and undo whatever you're doing in a:hover.
We can use :not() operator on hover like below example.
We can use this when we don't want to apply :hover effect to the selected item
.block-wraper {
display: flex;
}
.block {
width: 50px;
height: 50px;
border-radius: 3px;
border: 1px solid;
margin: 0px 5px;
cursor: pointer;
}
.active {
background: #0095ff;
}
.block:not(.active):hover {
background: #b6e1ff;
}
<div class="block-wraper">
<div class="block"></div>
<div class="block active"></div>
<div class="block"></div>
<div class="block"></div>
</div>
I've setup a demo of my problem at the following url: http://jsfiddle.net/YHHg7/4/
I'm trying to do the following:
legend {
display: block;
border-bottom: 1px solid red;
margin-bottom: 50px;
}
However it seems all browsers ignore the display: block on a legend tag. Is this the correct behaviour for this tag or am I doing something wrong?
<legend> is a block-level element by default, so whether you include display: block there's no difference. However, it's treated specially together with <fieldset> by browsers as a label for a fieldset.
To "detach" it from the <fieldset> you can give it a non-static position, or float it, or even just play a little more with its margins. Results can be a little unpredictable, though, again due to the special treatment of both elements.
IMO the best thing you can do to control legend is just leave it as a semantic fixture only.
CSS:
legend {
display: block;
margin: 0;
border: 0;
padding: 0;
width: 100%;
}
And then use a span inside it to control all of your desired styling:
HTML:
<legend><span>Span to the rescue!</span></legend>
CSS:
legend span {
display: block;
padding: 0 20px;
border-bottom: 1px solid red;
}
Clean, semantic, and generally easily manipulated across different browsers
A legend is a block-level element by default. If I add the width back in using Chrome (Dev channel), the width of the legend is changed appropriately.
If you're instead wondering about the margin style, a legend can only have its left or right margins set, and that would place it relative to the fieldset its's contained in. If you want to add spacing to the other elements, then you would probably want to add padding to the fieldset itself.
Uncomment the width attribute if you want the red line to go all the way across.
legend {
display: block;
border-bottom: 1px solid red;
width:100%;
margin-bottom: 50px;
}