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
Related
I'm experimenting with Bootstrap.js panels that can collapse. I'd like to see if it's possible to change styling of a panel-heading element but only when it's adjacent to a panel-collapse element. The selector below will change all headings obviously.
.panel-heading:hover {}
Because I'm trying to look ahead to see if the target element is followed by a particular class I'm not sure I see if CSS can support this.
<!-- This should change style of panel-heading when hovering over the panel-heading element -->
<div class="panel">
<div class="panel-heading">
</div>
<div class="panel-collapse">
</div>
</div>
<!-- This should NOT change the style of the panel-heading when hovering over the panel-heading element -->
<div class="panel">
<div class="panel-heading">
</div>
<div class="panel-body">
</div>
</div>
There is no way to currently do this in CSS3, however there is something being proposed in CSS Selectors Level 4. This feature has been widely requested.
Relational Pseudo-class: :has()
Such that you could do something like:
.panel:has(.panel-collapse) .panel-heading {
}
Meaning, apply styles to all .panel-heading classes that are a child of .panel classes containing .panel-collapse
This is a great article on upcoming CSS Selectors Level 4: https://www.sitepoint.com/future-generation-css-selectors-level-4/
In the meantime, you'll have to use something like jQuery. You could add a class like .panel-hoverable to all .panel elements that contain elements with the class .panel-collapse
I need to target multiple elements and classes under a specific ID. NOTE: I must specify the ID. The classes will be used again with other IDs
#block-views-now-playing2-block .poster1 img
{
width:auto;
height:400px;
}
#block-views-now-playing2-block .poster1 div
{
width:263px;
height:400px;
overflow:hidden;
}
In this example the img element accepts the css. The div does not and the CSS is ignored. Why?
HTML:
<div class="block block-views contextual-links-region last even" id="block-views-now-playing2-block">
<div class="field-content poster1">
<img src="http://mysite/myposter.jpg">
</div>
</div>
Adding an ID in front to your CSS selector will not affect, how things are selected, but rather where. When you start with #block-views-now-playing2-block you are limiting the scope of what you're looking for to anything contained inside of #block-views-now-playing2-block
So #block-views-now-playing2-block .poster1 img reads: "Find any img that exists inside of and element with class poster1 which exists inside of an element with the ID block-views-now-playing2-block".
It works the same way for you div example.
For the CSS to find something the html would need to be structured something like this:
<div id="block-views-now-playing2-block">
<div class="poster1">
<img/>
</div>
</div>
If you were to change the CSS to #block-views-now-playing2-block.poster1 img (notice the missing space). The CSS would read: "Any img inside of an element that has an ID of block-views-now-playing2-block.poster1 and a class of poster1" The css now would only find something if the HTML were structured similar to:
<div id="block-views-now-playing2-block" class="poster1">
<div>
<img/>
</div>
</div>
(Notice the class moved up one level with the ID)
But really I can only guess why it isn't working for you without seeing your HTML.
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...
}
#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.