Is there anyway to specify a class after a pseudo element? For example, I want to find the :last-childof the parent - and if that child has x-class, style accordingly. With SCSS, this would be relatively easier, but the project I'm working on doesn't use SASS.
Any ideas?
Here's what I was trying to do...which is obvs wrong:
form .entry-form-wrap :last-child.nested-tmpl-inner
HTML is too complex to post, but I've included a general block of code to give you an idea of the flow:
<form>
<div class="entry-form-wrap">
<div class="some-class" />
<div class="some-class" />
<div class="some-class nested-tmpl-inner" />
</div>
</form>
It's not obvs wrong. You can specify a class right after the pseudo, like :pseudo.class.
Check this fiddle: http://jsfiddle.net/fYy4T/
Related
I have to remove the extra padding being adding up in .item-inner class inside .item-native.
https://ibb.co/vs4BWWp
<div class="item-native">
<slot name="start">
</slot>
<div class="item-inner">
<div class="input-wrapper">
<slot></slot>
</div><slot name="end"></slot>
<div class="item-inner-highlight"></div></div>
</div>
ion-item{
--inner-padding-end: 0px;
--padding-start:0px
}
This works, because since ionic 4 web components & shadow DOM were introduced to keep "essential CSS" isolated.
In a lot of cases it just works to put -- in front of the wanted CSS attribute to change it or in other words: just define a CSS variable with the same name as the attribute you want to change.
Does someone know a complete reference to ionic's shadow DOM or something like that?
Further information:
Shadow DOM in Ionic (and Why it’s Awesome), CSS Shadow Parts,
CSS variables, Web Components
.item-native .item-inner{padding:0}. this will remove padding of that element
this and remove padding of that element with class item-inner:
.item-inner{
padding:0 !important;
}
On my webpage there are DIV's that are created dynamically with the class of jOUT.
I want to change the color of every other iteration of the class.
I'm trying to do it this way:
.jOUT:nth-child(even){
background:#eeefff;
}
.jOUT:nth-child(odd){
background:#cccffe;
}
My HTML is as follows:
<div id="outData">
<input type="hidden" name="outDivider" value="-------">
<div class="jOUT isOpaque">
<!-- ... -->
</div>
<input type="hidden" name="outDivider" value="-------">
<div class="jOUT isOpaque">
<!-- ... -->
</div>
<input type="hidden" name="outDivider" value="-------">
<div class="jOUT">
<!-- ... -->
</div>
</div>
Full HTML here
But it's not working. What's really weird is that using the console in Chrome, when I select each jOUT, it shows ALL of them as having the "even" attribute.
I thought for sure that I had invalid CSS or HTML but I can't find it. It has to be something I'm doing, but what? I guess what I'm asking for is an idea for a place to start looking for the problem. I've verified the CSS using w3c CSS verification, and the HTML using HTML Tidy.
Your current CSS is working as it should, because you're targeting ALL children (including input); which means, in this scenario, all your div.jOUT are even - you should rather use :nth-of-type, which will only target instances of div.jOUT ...
.jOUT:nth-of-type(even){
background:#eeefff;
}
.jOUT:nth-of-type(odd){
background:#cccffe;
}
DEMO fiddle
This would work here:
.jOUT:nth-child(4n){
background:#eeefff;
}
More on that
This is somewhat fragile, though. A better approach is to add an alternative style class on those elements, possibly via your server-side app.
Your input[name="outDivider"] elements are in the way, thus making every jOUT element even. Here's a working pen where I took them out and made the selector work properly. I also changed the colors, so it's easier to see.
Edit: #isherwood beat me to it, but if this input[name="outDivider"] elements are absolutely necessary, his solution works best!
Imagine you have a div in one of three possible states.
<div id="apple" />
<div id="apple" class="expanded" />
<div id="apple" class= "collapsed" />
How can you explicitly target the #apple div only when the expand AND collapse classes are NOT present?
What I came up with is #apple :not[id$="ed"] but it's not working. Is it possible to combine both these selectors?
Note: For this scenario it's not enough to directly style #apple. The selection has to be explicitly for only when the expand and collapse classes are NOT there. The only browser that needs to be supported is a current release of Chrome.
#apple:not(.expanded):not(.collapsed)
However, it's not valid to have multiple id=apple elements. Technically, you could also do: #apple:not([class~=expanded]):not([class~=collapsed]). To be even more general, perhaps #apple:not([class])
#apple:not(.expand):not(.collapsed) will work.
Use the attribute selector [class] to target any class.
Since you want to use :not then you can do something like this
#apple:not([class]) which selects #apple only if it doesn't have any classes.
Working example:
#apple:not([class]) {
color: red;
}
<div id="apple">no class</div>
<div id="apple" class="expanded">expanded class</div>
<div id="apple" class="collapsed">collapsed class</div>
I'm working in a content management system that allows me limited (no) access to the stylesheets, but does allow me to insert CSS into certain templates. So I have this:
<div class="inside_widget">
<div class="input"><span class="form_label">Form stuff</span></div>
<div class="input"><span class="form_label">Form stuff</span></div>
<div class="input"><span class="form_label">Form stuff</span></div>
etc...
</div>
Where inside_widget, input, and form_label are all defined in a sheet I can't touch. I want to put some custom CSS on "form_label" without having to touch every single span.
I tried using the style attribute in the containing div, but that did not work.
<div class="inside_widget" style=".form_label {color:#FFFFFF;}" >
Note: I want to retain everything else in the inside_widget styling, and not have to define a whole new class.
I think what the OP is trying to achieve is not having to repeat the style="" attribute for every single <span> in his form.
This can be done by simply adding your own class name to the enclosing div's classes:
<div class="inside_widget myclass" ...>
<!-- ... -->
</div>
Then make your own secondary stylesheet and define myclass:
.myclass span
{
color: #ffffff;
}
You can put this secondary CSS either in a <style> tag in the HTML itself, or in its own CSS file linked in.
You could do it this below.
<span class="form_label" style="color:#FFFFFF;">Form Stuff</span>
Inline styles like this will overwrite any css rules in a stylesheet, unless in the stylesheet they have a rule with !important
you do not know css right? will look like
<div class="inside_widget" style="color:#FFFFFF;" >
but I suggest you create a new css file and add whatever you want in the same
Suppose I have a hierarchy like this:
<div class="first_level">
<div class="second_level_1">
<div class="third_level_1">
<div class="fourth_level_1">
<ul><li></li><li></li></ul>
</div>
<div class="fourth_level_2">
<div class="fifth_level_1">
</div>
<div class="fifth_level_2">
<ul><li></li><li></li></ul>
</div>
</div>
</div>
</div>
<div class="second_level_2">
<ul><li></li><li></li></ul>
</div>
</div>
I want to select all those divs, which contain at least one ul in them. So in the above example code, that would be divs second_level_2, fourth_level_1 and fifth_level_2 ..
What CSS selector can I use to get this result ?
EDIT:
If it's not possible with CSS alone, you can suggest answers using JavaScript, although due to the nature of my actual code, I would really like to avoid that if possible ..
jsfiddle
Here are two options - both have downsides, but you can consider them:
You can either manually add a second class to the divs with a ul:
<div class="fourth_level_1 div_with_ul_class">
Note: If you are using some dynamic language on the server, such as PHP, this could actually be implemented fairly easily, without manual coding.
Or if you want to be dynamic I recommend jQuery:
$("div > ul").parent().addClass("div_with_ul_class");
Parent selector isn't available in CSS, despite a lot of requests to add it.
jQuery has a nice selector, know as :has; http://api.jquery.com/has-selector/
$('div:has(ul)');
Would be the jQuery selector.