I have a nested display and I'm trying to style all nested collection besides the first one
<div class="container">
<div class="main-collection">
<div class="collection">
<!-- lots of code -->
<div class="collection"></div>
<!-- lots of code -->
<div class="collection"></div>
<!-- lots of code -->
<div class="collection">
<!-- lots of code -->
<div class="collection"></div>
<!-- lots of code -->
<div class="collection"></div>
</div>
</div>
</div>
</div>
I want all but the one directly under main-collection
I'm using less.
.main-collection > .collection .collection {
/* your styles here */
}
Working demo
Select all .collection elements that are descendants of a .collection element that is it's self a DIRECT descendant (>) of .main-collection
try to this in less css
.main-collection{
>.collection{
// here style
>.collection{
// here style
>.collection{
// here style
}
}
}
}
The most obvious way to do this is to use nth-child, although support is limited for older browsers. If you have control over your markup, have you considered using a class to identify the element you want to style differently, in particular?
Do the css for all of the elements first and then below that select only the first one and do your styles for it. The css below overrides the other stuff above. You can do it with :nth-child(1) or I guess :first-childor probably even :first-of-type and :nth-of-type(1)
.main-collection .collection {
css for all of them
}
.main-collection .collection:nth-child(1) {
this will only target the first one
}
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
The snippet below is a part of a much larger structure with many .step elements.
I need to match all .stepText elements that are next to .stepTitleAndImages ul.standard
In other words, match all .stepText elements that have .step parent that has .stepTitleAndImages child that has .stepImages.standard child
<div class="step">
<div class="stepTitleAndImages">
<h3 class="stepTitle"></h3>
<ul class="stepImages standard"></ul>
<div class="clearer"></div>
</div>
<div class="stepText "></div> **HOW TO SELECT ALL ELEMENTS LIKE THIS ONE?**
<div class="clearer"></div>
</div>
<div class="step">
<div class="stepTitleAndImages">
<h3 class="stepTitle"></h3>
<ul class="stepImages medium"></ul>
<div class="clearer"></div>
</div>
<div class="stepText "></div>
<div class="clearer"></div>
</div>
PS: I cannot modify the HTML. Cannot use anything other than pure CSS.
Just use this for selecting first case
.step:nth-child(1) .stepText {
... Your CSS here
}
For second one use
.step:nth-child(2) .stepText {
... Your CSS here
}
For selecting both use
.step .stepText {
... Your CSS here
}
Then you should require jquery for that
Selecting Parents sibling is not possible only with pure CSS yet, You can achieve this by a single line of jquery:
$('ul.standard').parent().siblings(".stepText").css(...your CSS here);
This cannot be done with your HTML structure and with pure CSS. The closest solution to your problem, changing the HTML structure and with pure CSS, would be to move the standard class to its parent tag:
<div class="stepTitleAndImages standard">
<h3 class="stepTitle"></h3>
<ul class="stepImages"></ul>
<div class="clearer"></div>
</div>
This would allow you to use the adjacent sibling selector (+), which matches the second selector if it's the direct next sibling of the first, like this:
.stepTitleAndImages.standard + .stepText {
/* Styles */
}
A more flexible approach would be to use the general sibling selector which would match any sibling preceded by the first selector, not only the direct next one:
.stepTitleAndImages.standard ~ .stepText {
/* Styles */
}
The :has pseudo-class is in development by Mozilla, but it hasn't hit any stable browsers yet. With it, and with your HTML structure, you could go:
.stepTitleAndImages:has(.standard) + .stepText {
/* Styles */
}
Unfortunately, currently you can't solve this in any other way with CSS (and with your HTML structure) only.
I created a website that has different navigation menus. In 2 menus, I use the same HTML class element.
I have a .css file that styles that class element in 1 menu. However, in another menu, I would like to style the elements differently.
Yes, I know I can rename the class name, but to be consistent with what I have right now in the structure of my markup, and also the fact that the class name is used to style multiple other elements, how would I be able to apply different styles to 2 different elements with the same class name?
Can this be done using some kind of if statement condition in CSS?
For example, in 1.html:
<div class="classname"> Some code </div>
In 2.html:
<div class="classname"> Some different code </div>
Since I just want to style this "one" element differently in 2.html, can I just add an id attribute along with the class attribute, and use both the id and class and somehow as the selector?
Once again, I would not like to remove the class name at all, if possible.
Thanks!
I'll just add that typically when there are multiple menus you might have them wrapped in a different structure. Take for instance:
<nav class='mainnav'><div class="classname one"> Some code </div></nav>
<div class='wrapper'><div class="classname"> Some different code </div></div>
You can easily target these:
.mainnav>.classone {}
.wrapper>.classone {}
Or if the parent html has a class:
<div class='ancestor1'><div><div class="classname one"> Some code </div></div></div>
<div class='ancestor2'><div><div class="classname one"> Some code </div></div></div>
.ancestor1 .classname {}
.ancestor2 .classname {}
Obviously this depends on where in the html they might be.
You can add another class name to each element.
<div class="classname one"> Some code </div>
<div class="classname two"> Some different code </div>
And then aplpy different rules to them:
.classname.one {
border: 1px solid #00f;
}
.classname.two {
border: 1px solid #f00;
}
Edit:
Updated Demo link: http://jsfiddle.net/8C76m/2/
If you must keep only one class for each element, you may try the nth-child or nth-of-type pseudo-class:
.classname:first-child {
font-size: 2em;
}
.classname:nth-of-type(2) {
color: #f00;
}
Ref:
http://www.w3schools.com/cssref/sel_firstchild.asp and http://www.w3schools.com/cssref/sel_nth-of-type.asp
Just give each one a different id
#firsthtml .classname {
}
#sechtml .classname {
}
Be sure to use the space, as #firsthtml.classname is something totally different.
<div class="classname" id="firsthtml"></div>
<div class="classname" id="sechtml"></div>
You could also use two different class names
<div class="classname secondclassname"></div>
Define secondclassname in your css with the additional css
.classname.secondclassname{
}
You can also do something like this:
<div class="classname"> Some code </div>
<div class="classname second"> Some different code </div>
And the CSS for the first .classname would be something like that:
.classname:not(.second) {}
For the second element it goes easily:
.classname.second {}
I know this is a poor way of doing it, the suggestions from previous answers are helpful, but try this maybe:
First menu:
<div class="classname"> Some code </div>
Second menu:
<div class="classname" style="margin-bottom:0;color:Black;width:100px;height:100px"> Some other code </div>
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
<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...
}