Is there a CSS pseudo class for elements with no text nodes like so:
div:nocontent {
display: none;
}
I know that there is the :empty pseudo-class but the thing I want should ignore tags...
For example:
<div>
<p></p>
</div>
Any solution for this?
EDIT:
For clarification it could be a syntax like this:
<div class="checker">
<div class="somemarkupcontainerthatcomesfromthesystemandcantberemoved"></div>
</div>
And hide the whole thing like this (this would be optimal):
.checker:nocontent {
display: none;
}
If you want to target your div, you need a parent selector, which does not (yet) exist, so to solve that a script is needed.
As suggested by Hitmands, check this post for a script sample.
When it comes to script, one have also the server side approach, where a replacement script could parse out empty tags before sending the result to the client.
If you want to target your p, if empty and is a child of your div, you can do like this.
div {
border: 2px solid red;
min-height: 20px;
}
p {
border: 2px solid blue;
height: 20px;
}
div:not(:empty) p:empty {
display: none;
}
<div>
<p></p>
</div>
<br />
<div>
<p>Hey</p>
</div>
Yes, empty check if the node is empty (so with no text and no child nodes).
There are no CSS-only options for your purpose.
Related
I am trying to style any <a> in my website that doesn't appear inside a <p> to look more like a button.
I have been looking at the :not() selector and think this should work to select them:
:not(p) a {}
However doesn't seem to work in the way I expect. I have a codepen here as an example
https://codepen.io/pummra/pen/eYJoNqd
You can address the direct children in the selector using > between the two tags:
:not(p) > a
Otherwise that selector (without the >) would almost always apply, since an a tag inside a p tag is for example also a (not direct) child of the body tag.
Applied to your Codepen example:
a {
color: #00f;
}
:not(p) > a {
background-color: #1779ba;
color: #fefefe;
display: inline-block;
vertical-align: middle;
margin: 0 0 1rem 0;
padding: 0.85em 1em;
}
<div>
<h1>An interesting article</h1>
<p>This is an interesting article about something. There will be a bunch of copy here. Some of it might even have a link in. The links in the copy would look like normal links. The links outside of the paragraph should look like buttons.</p>
Read more about this
</div>
I need change a color for this element
<div class="box download">
<div class="box-inner-block">
Plugin Windows
</div>
</div>
I call a from CSS with:
.download.box-inner-block a {
color: white!important;
}
But it does not work, why? I need this color only for the element in .box-inner-block inside .download.
Is this what you are looking for as understood in your question ?
If so you need to carefully watch how you indent and construct your css.
As you can see in my snippet I added a space between:
.download .box-inner-block a
in order to make that work.
You can also remove !important from you css as it will not be useful in that case. If you need it, don't forget to add a space bewtween white and !important
.download {
background-color: black;
}
.download .box-inner-block a {
color: white;
}
<div class="box download">
<div class="box-inner-block">
Plugin Windows
</div>
</div>
You are using the wrong selector, as .download.box-inner-block selects elements which has both download AND box-inner-block classes.
<div class="download box-inner-block"/>
To target nested elements, leave a space between the two class selectors. So the correct selector in your case is:
.download .box-inner-block a {
color: white;
}
In this case you can drop !important too.
What I mean to say with this is, if I have a page with two divs, and I want each div to have a separate style, what way would I go about this?
Example:
div{ background: red;} // apply this style to one div.
div{ background: blue;} //apply this style to another div.
I realize it would be possible to just add a class to each div, but what if I expand it? What if I want a whole section of my page with a lot of different attributes to use one part of the stylesheet, and another whole section to use another part?
You can simply prefix the CSS rules with the ID or class of the section. For example:
#section1 h1 {
color: red;
}
#section2 h1 {
color: blue;
}
and basically prefix every rule with either #section1 or #section2 depending on the containing section.
As far as I understand it you want for example every div in your header to be green while every div in your footer is supposed to be red.
#header div{ background-color: green; }
And than
<div id="header">
<div>I'm green</div>
</div>
You can also use more complex selectors to helpt you solve special cases, take this example:
#header div{ background-color: red; }
#header > div{ background-color: green; }
And than
<div id="header">
<div>
I'm green...
<div>...and I'm red</div>
</div>
</div>
Microsoft has a great overview of what selectors are available. There examples are sometimes a little weak but its something.
You can do this:
.firstSectionType div{ background: red;} // apply this style to one div.
.firstSectionType span { color: blue; }
.secondSectionType div{ background: blue;} //apply this style to another div.
.secondSectionType span {color: red; }
Then if your HTML looks like this:
<div class="firstSectionType">
<p><span>Hello</span></p>
<div>This has a red background and <span>this is blue text</span></div>
</div>
<div class="secondSectionType">
<p><span>Hello</span></p>
<div>This has a blue background and <span>this is red text</span></div>
</div>
the divs and spans in the corresponding secions will be formatted accordingly.
The CSS above requires you to repeat .firstSectionType or .secondSectionType in each rule, but a CSS preprocessor like LESS will allow you to rewrite it like:
.firstSectionType
{
div{ background: red;} // apply this style to one div.
span { color: blue; }
}
.secondSectionType
{
div{ background: blue;} //apply this style to another div.
span {color: red; }
}
I have this simple CSS:
.cont div {
margin:10px;
border:1px solid;
}
.mark { /* This get ignored? */
margin:30px;
}
With this markup:
<div class="cont">
<div>a</div>
<div class="mark">b</div>
</div>
I except the div.mark having margin:30px; but at least in Chrome this isn't true because the generic rule .cont div seems to have a higher priority.
Consider I don't want to use !important are there any other way to solve this?
http://jsfiddle.net/xNVRm/
Just make your selector more specific by adding the tag name:
div.mark {
margin:30px;
}
Demo: http://jsfiddle.net/xNVRm/1/
You could also use .cont .mark if you want to avoid using the tag name.
In order to avoid to use the important you need to make your css selector more specific. You can use .cont div.mark. It is more specific than div.mark.
The ".cont div" declaration overrides the ".mark" declaration because it's actually more specific. CSS uses a kind of point system to figure out which rules apply. In your case, ".cont div" specifies both a class and an element inside it, whereas ".mark" only specifies a class.
For the exact rules that should be used by all conforming browsers, see this link: http://www.w3.org/TR/CSS21/cascade.html#specificity
In your case you could fix this by using ".cont .mark" in the second declaration.
Specificity is key to how CSS rules are given a pecking order. Try looking at this article from HTML Dog:
http://www.htmldog.com/guides/cssadvanced/specificity/
You could use div.mark instead, which means any div that has the class of mark, do this.
Looking over this again, I see I wasn't understanding what you were trying to do. I think I see now.
You are is saying - ANY div inside of anything with class .cont will have 10px margin. It's more specific then .mark. .mark is 30px - BUT it's a div that is inside of .cont - so it's 10px. It reads right to left - that is a good way to think about it and check specificity.
I have come to think of things with a more object oriented approach. What do you think about this approach?
HTML
<div class="container section01">
<div class="block a">a</div>
<div class="block b">b</div>
</div>
CSS
.container {
width: 100%;
float: left;
border: 1px solid red;
}
.container .block {
/* you can style these site wide */
}
.section01 .block {
border:1px solid black;
padding:10px;
margin-bottom: 1em;
}
.section01 .block:last-of-type {
margin-bottom: 0;
}
.section01 .a {
background-color: red;
}
.section01 .b {
background-color: lightblue;
}
SASS would make this much easier.
a jsFiddle of this example
a CODEPEN of this on a larger scale
I would like make all text within div.main gray except for all content within the child div.exception. div.exception should appear as if class main was never added to the parent div.
Is this possible? If so, how? Thanks!
<style type="text/css">
.main{color: gray;}
.hello{color: red;}
</style>
<div class="main">
<div>
<div class="exception"><p class="hello">Hello</p><a>Link</a></div>
</div>
<div><p>Howdy</p></div>
<div><a>Link</a></div>
</div>
for modern browser, just apply the rules to every div but .exception
.main div:not(.exception) p {
/* style for very nested div not exception */
}
otherwise override the rules later (as suggested by #jacktheripper)
This is simply done by:
.main .exception {
your styling here (e.g. color: black)
}
See this jsFiddle example
You cannot use color: inherit as this selects only the immediate parent, when you want to select two parents above. Therefore you have to override the colour 'manually'
#F. Calderan's answer is an alternative, but browser support is variable
No, that's not possible.
You can easily override the style so that it appears not to have been colored gray, but then you have to know what the original color was:
.main .exception { color: black; }
If you would set the style on the inner elements directly intead of on the main element, and set the exception class on the same level, you could override it using inheit:
<style type="text/css">
.main div { color: gray; }
.main div.exception { color: inherit; }
.hello { color: red; }
</style>
<div class="main">
<div class="exception">
<div><p class="hello">Hello</p><a>Link</a></div>
</div>
<div><p>Howdy</p></div>
<div><a>Link</a></div>
</div>