does :has respond positively or negatively to display: none. Meaning if you have an element, with display none on it, would :has still see that there is an element present? I assume it would since there is an element there. But I might need to combine it with:
:not([style*="display: none"])
just confirming the behavior
The display property does not change behavior of selectors, as it doesn't change the DOM tree, so yes it would still work
like if you have
<div>
<p>Hi</p>
</div>
div:has(p) {
background: blue;
padding: 5rem;
}
p {
display: none;
}
Since "display:none" we set as inline style at any code that element will be hidden.
<style>
.wrp:has(p[style='display:none']){
display:block !important;
}
.wrp p:not([style='display:none']){
color:red;
}
</style>
<div class='wrp'>
<p style="display:none">1 This is a paragraph.</p>
<p>2 This is a paragraph.</p>
</div>
Related
I have a h3 tag which is deeply nested as follows and can't amend the component that contains
this styling.
Instead since I only have 1 h3 within this nest, trying to target it and amend its padding.
But this is not working. Can I know what I am doing wrong? I am doing something similar for another
div tag targeting the 6th position for that div. That works fine. Issue is with targetting this h3
tag. Tried adding !important to these styling which makes no diff. What am I doing wrong here?
This is the structure of the html currently.
// This is the only div I created passing in my custom styling and the component is wrapped within this.
<div className={styles.main}>
// all the following is coming from an external component I can't amend.
<div>
<div>
<div>
<div>
<span>some span text 1</span>
<div>some span text 2</div> <!-- also targetting this div and this works fine. See CSS below -->
</div>
<div></div>
</div>
</div>
<div>
<div>
<div>
<h3> <!-- This is the only h3 in entire nest -->
Some Random Text <!-- trying to give this a left padding -->
</h3>
</div>
</div>
</div>
</div>
</div>
My SCSS File
.main > div:nth-child(5) {
padding-top: 100px; // this works fine
}
// tried all the following. None of them works. I do not get the padding left 50px;
// The text is stuck to the left with no margin / padding.
.main > h3 {
padding-left: 50px !important; // Don't want to use !important. Tried with it just in case it works.
}
.main > h3:first-of-type {
padding-left: 50px !important; // Don't want to use !important. Tried with it just in case it works.
}
.main > h3:first-child {
padding-left: 50px !important; // Don't want to use !important. Tried with it just in case it works.
}
The problem is that you are using the direct descendant selector.
You are only selecting h3 elements that are direct children of .main
You need to modify your selector to select children/grandchildren/etc.
.main h3 {
...
}
I have css rule as follows,
.wrapper > h3{
color:red;
}
The html code,
<div class='wrapper'>
<h3>Text1</h3>
</div>
<div class='wrapper'>
<div data-ui-view=''>
<h3>Text2</h3>
</div>
</div>
Here is the plunker. The Text1 is shown in red colour but Text2 is not. I understood that this rule
will take the immediate <h3> element under .wrapper. In angularjs most of the time the elements will be wrapped under tag. So, I want to make a rule such that whenever an <h3> tag comes inside .wrapper class then it has to be in red colour. irrespective of <h3>'s parent elements. Is there a way to do it?
Simply make the rule:
.wrapper h3 { color: red; }
This will make all <h3> elements within the .wrapper class red
If you did want to target the grandchild element as your question title suggests you could use this rule:
.wrapper > * > h3 { color: red; }
I'm trying to make a simple web page design with multiple divs. Each div should apply 1 or more external stylesheet from a list.
My problem is that, from the examples I've read so far, I'm not sure how to do this elegantly. It seems that external stylesheets are applied to the whole html file. So should I be looking at modularizing my divs into separate files? Or would something like iFrame be a neater solution?
Current Solution:
External CSS:
div.test1 {
color: purple;
background-color: #d8da3d
}
.test2 {
color: red;
background-color: #d8da3d
}
#test3{
color: green;
background-color: #d8da3d
}
HTML body code:
<div class="test1">
<p> Style1
</div>
<div class="test2">
<p> Style2
</div>
<div id="test3">
<p> Style3
</div>
My references:
Div with external stylesheet?
http://www.htmlhelp.com/reference/css/style-html.html
- 1
Take a look at this:
https://stackoverflow.com/a/17668004/1552518
- 2
Or just add a class to each div:
<div id="container">
<div class='div1'>
style1
</div>
<div class='div2'>
Style2
</div>
</div>
And in your external css:
.div1 {
// Style applied only to the first div
}
.div2 {
// Style applied only to the second div
}
- 3
Or if you can't add a class to the divs use this in css:
#container > div:first-child {
// Style applied only to the first div
}
#container > div:last-child {
// Style applied only to the second div
}
Are you just trying to style the div's differently? Have you looked into using a class for each of the divs?
From the second link you provided: http://www.htmlhelp.com/reference/css/style-html.html#class
When you use the css styling:
body{
color:purple;
background-color: #d8da3d
}
You are saying that you want to style the entire body of the document with the styling you have set.
In order to target specific elements you should give those elements an id or class.
For example:
<div id="test1"></div>
<div class="testing"></div>
<div class="testing"></div>
Please note that when using and id you must make sure to give the element a unique id. However many elements can share the same class. Therefore for the above example the styling:
#test1{
color:blue;
background-color:black;
}
.testing{
color:red;
background-color:white;
}
Will apply the first style (test1) to the div with the same id, and the second style (testing) to the two divs with the same class.
I have this HTML --
<ul class="parent">
<li>
<div class="child-1 x">
<div class="child-2 x">test</div>
</div>
</li>
<li>
<div class="child-1 x">
<div class="child-2 x">test</div>
</div>
</li>
<li>
<div class="child-1 x">
<div class="child-2 x">test</div>
</div>
</li>
</ul>
And this CSS --
.x{
border:1px solid black;
padding: 10px;
}
.child-1:last-child{
border-color:red;
}
http://jsfiddle.net/BDj2h/1/
Im trying to apply red border only to the last child-1 div. But its not happening. CSS last-child pseudo class checks whether its the last element inside its immediate parent, not in the whole DOM(which was my wrong understanding).
Any idea how to do this with css only?
li:last-child .child-1
Would have the same effect.
JSFiddle
:last-child1 pseudo won't respect the last declared class, it just tracks the last instance of the element in the parent/child relation.
1 Same as :nth-last-child(1). The :last-child pseudo-class represents an
element that is the last child of some other element.
So for example, if you've something like
Writing something like
div.wrap div.blow:last-child {
/* .blow doesn't make any sense there, CSS will look up
for last div element nested inside .wrap */
}
In this case, you can try using
.parent li:last-child div[class^="child-1"] {
border-color:red;
}
Or simply
.parent li:last-child div.child-1.x {
border-color:red;
}
Demo
Note: last-child is somewhat loose pseudo, as it will simply ignore the element if it's not the last child of the parent element, so here, last-of-type comes in to action where it selects last type of an element regardless of it's DOM level.
ul li:last-child > div.child-1 {
border-color:red;
}
Example: http://jsfiddle.net/BDj2h/3/
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.