#main .container > div:not(.sites):not(.default) {
display: none;
}
The <h1> tag is visible while the below yui-ge div tag is hidden. If > only applies to immediate children how come my yui-ge is having the above CSS applied to it (both in Chrome and Firefox).
<div class='container'>
<div class='default selected'>
<h1>Page Title</h1>
<div class='yui-ge'> //for some reason, this tag remains hidden cause of the above CSS
//more div tags
</div>
</div>
//more HTML here
</div>
update
Look here: --LINK REMOVED--
Click the "Woot" tab.... no results are shown on the default woot tab - they remain hidden.
You have this CSS rule:
#main .woot > div:not(.sites):not(.default) {
display: none;
}
This rule applies to all DIVs inside the #main element, that do not have the classes sites or default and are children of a .woot element.
Your structure is:
<div id="main">
<div class="woot">
<div class="woot default selected">
<div class="yui-ge"> ... </div>
</div>
</div>
</div>
As you can see, the .yui-ge DIV does not have the class sites nor default and it is inside a .woot element. Therefore, it will be hidden.
The problem is that you have two DIVs in the ancestor chain that have the class woot.
If you hide an element, all it's child elements get hidden too.
Related
I have an editable body with a div:
<body contenteditable="true">
<div class="paragraph">Text</div>
<body/>
And a :before style:
div.paragraph:before {
content: "☑";
}
Fiddle: http://jsfiddle.net/uy9xs5p0/
In Firefox I can put the cursor at the beginning of the text and press backspace and the check mark gets deleted. How to prevent that?
You are setting the contenteditable in the parent div, therefore when erasing, you are deleting the div.paragraph, so the pseudo will be gone.
See that if you set the property in the child div instead, you can make it work.
div.paragraph:before {
content: "☑";
}
<div>
<div contenteditable="true" class="paragraph">Text</div>
</div>
When this issue is reproduced, (via this fiddle, for instance) the developer tools show that div.paragraph is removed. Only a text node remains.
becomes
To stop the div from being removed, don't give its parent contenteditable. Use this instead:
<body>
<div class="paragraph" contenteditable="true">Text</div>
</body>
Fiddle: http://jsfiddle.net/5y00q6ya/3/
You are not editing the :before content.
It just removes the whole .paragraph element once it gets empty, or if you backspace when you are at the beginning of the tag.
The other answers explain the problem. If a div inherits its edit-ability from its parent, it is possible to remove the child div itself and together with the div also the before-content.
In order to prevent this, it is necessary that the editable div must not be placed in an editable parent. This makes it necessary to put every editable div into a non editable parent div to preserve the editable child div.
The following example shows this
div.node {
margin-left: 1em;
}
div.paragraph:before {
content: "☑";
}
<div contenteditable="false" class="node">
<div contenteditable="true" class="paragraph">Major</div>
<div contenteditable="false" class="node">
<div contenteditable="true" class="paragraph">Minor</div>
</div>
</div>
Possible workaround this problem. This seems to working as you want it to be.
<div contenteditable="true" class="upper-div">
<div class="paragraph">Text</div>
</div>
div.upper-div:before {
content: "☑";
display:inline-block;
}
.paragraph{display:inline-block;}
I'm currently working with a third party JS library that inserts content areas within the page/DOM, the library is Sir Trevor.
Now I wish to apply some custom CSS rules, for example:
.st-block:before {
#include roundedIcon(38px, $colorX, $colorY);
content: counter(mylistCounter, decimal);
counter-increment: mylistCounter;
margin-right: $margin-variable;
}
now this works great and a number is put before my divs with the .st-block class. However a DIV with this class can and some times does contain a child div with the same class, like so:
<div class="content">
<div id="st-block-16" class="st-block st-icon--add st-item-ready" data-type="listicle" data-instance="st-editor-8">
<!-- here's the child... grrr!!! -->
<div id="st-block-17" class="st-block st-icon--add st-item-ready" data-type="listicle" data-instance="st-editor-8">
Child Div Here...
</div>
</div>
<div id="st-block-18" class="st-block st-icon--add st-item-ready" data-type="listicle" data-instance="st-editor-8">
No Child Div
</div>
<div id="st-block-19" class="st-block st-icon--add st-item-ready" data-type="listicle" data-instance="st-editor-8">
No Child Div
</div>
</div>
How can I amend my CSS/SASS class to prevent the child/nested div with the same class being affected (in the example above the one with ID id="st-block-17")? PLEASE NOTE that I have no control over the alocation of IDs
Select only the classes which are only one level deeper then the div with class="content"
.content > .st-block
Here is the html I am working with. I want to write a css selector for the Item with text "DESIRED ELEMENT":
<div class="TopDiv">
<div class="container">
<div class="row">
<div class="span2">
<strong>Text1</strong>
</div>
<div class="span3">Text2</div>
<div class="span2">
<strong>Text3</strong>
</div>
<div class="span3">DESIRED ELEMENT</div>
</div>
<div class="row">
<div class="span2">
<strong>Text4</strong>
</div>
<div class="span3">Text5</div>
<div class="span2">
<strong>Text6</strong>
</div>
<div class="span3">
<div>Text7</div>
<div>Text8</div>
<div>Text9</div>
<div>Text10</div>
<div>Text11</div>
<div>Text12</div>
<div>Text13</div>
</div>
</div>
</div>
</div>
I am having a lot of trouble getting to the div that that I want because I don't completely understand the nth-child of type this or that or getting a child of a child.
I just want something that is nice and short that will retrieve the 4th div tag child of the first row after container.
The selector depends on if that is the order your elements are always in?
Anyway, you could use:
.row:first-child > .span3:last-child
This will select the last element with the class .span3 which is a child of the first .row.
jsFiddle here.
If you want to support last-child in IE8 and before, there is always Selectivizr.
One selector that should work in IE7/IE8 could be .row:first-child > .span3 ~ div.span3.
Only use this though if there are exactly two elements inside a row with the .span3 class.
jsFiddle here.
If it's not the last, but always the fourth, use .row:first-child > div:nth-child(4).
jsFiddle here.
the 4th div tag child of the first row after container.
The css translation of that will be:
after container
.container >
of the first row
.row:first-child >
the 4th div tag child
div:nth-child(4)
so in one line:
.container > .row:first-child > div:nth-child(4)
find the container class and in childs find the first row class and inside find the 4th div tag.
<div id="main-content">
<div>
<div>target me
<div>don't target me</div>
</div>
</div>
<div>
<div>target me too
<div>don't target me</div>
</div>
</div>
</div>
I've tried this:
#main-content div>div {
}
But this ALSO targets the divs saying "don't target me" I wish not to target those divs.
Of course we can use Id's or classes, but the point is to declare a general rule for all.
Please advice.
Just refine the selector a bit to enforce the hierarchy: #main-content > div > div
http://jsfiddle.net/zXaLU/
As a note, when using structural selectors it's nice to reference non-generic tags.
Example: #main-content > NAV > UL is more meaningful than #main-content > DIV > DIV
If you want styles only to apply to the outer of the two divs, you need to use two style definitions. The first sets the style for the div targeted and the second for the inner div not to be targeted:
#main-content div>div {
/* set some styles */
}
#main-content div>div>div {
/* reset the styles defined before */
}
In general the inner div (not targeted) inherits all the styles of its parent div, so in order to nullify that effect, you have to explicitly reset all those styles again.
EDIT
After all comments: If "targeting" does not include usual CSS inheritance, Tim Medora's answer is more suitable. My answer tried to account for inheritance as well.
How [dooes one] properly select [the specified] elements?
The "proper" way would be to give the items you want to select a class that is indicative of their status:
<div id="main-content">
<div>
<div class="someclass">target me
<div>don't target me</div>
</div>
</div>
<div>
<div class="someclass">target me too
<div>don't target me</div>
</div>
</div>
</div>
...and then you can simply use the class selector:
.someclass {
...styles...
}
But if you're unable to modify the markup, you can still use the child selector chain:
#main-content > div > div {
...styles...
}
I would like to change the style of all the entries following a certain div. See example. Is this possible with child selectors? Thanks!
<div class="wrapper">
<div class="entry">content</div>
<div class="entry">content</div>
<div class="CHANGE">content</div>
<div class="entry">content</div>
<div class="entry">content</div>
</div>
This selector :
div.CHANGE ~ div {your rules;}
For elements directly under div.wrapper.
div.wrapper > div {your rules;}