I have a div, which contains 3 child divs.
I have a selector .parent-div .child-div:nth-child(1) which selects the first child div.
And .parent-div .child-div:nth-child(3) selects the last child div.
But, .parent-div .child-div:last-child selects nothing.
Any clues on what could be the issue? Does it have anything to do with float or absolute positioning?
Incidentally, I made the divs sortable using JQuery UI, which might have added some additional classes.
Edit:
The .parent-div has 3 .childA-div's and one .child-clear div. So, the last .childA-div is not considered as a last-child because the real last child is of a different class.
I used nth-last-child(2) as suggested below.
use .child-div:nth-last-child(1) { }
The :nth-last-child(n) selector matches every element that is the nth child, regardless of type, of its parent, counting from the last child.
Related
Is there a way to set a CSS class to OL element which wraps LI elements in QuillJS. Basically what I want is to apply the CSS class which is set to one LI element when selecting the align format. Currently selecting text in a list to apply align format sets the ql-aling class to the selected list item element, which is fine, but for some special styling requirement I would like to set the ql-align class to the parent element which is either OL or UL element.
I would like to have something like this inside the editor.
<ol class="ql-align-center"><li>item</li> </ol>
It does not matter if the class gets set also to the LI element.
What I first tried is just using CSS to target desired elements, because what I need is to set some style on elements that are first siblings to the elements which have the ql-align class set. But I wasn't able to create a selector which would target for instance a P element that is the first next sibling to the OL element which has LI elements with the class ql-align. So if there is a way to do it by just using CSS that would be awesome.
Then I tried overriding quill functionality but I didn't manage to find a way to set the class to the OL element and to persist it.
Then I tried using plain JS to set the class to the OL element by directly manipulating the HTML, but again I couldn't get the class to persist because I guess quill rerenders the HTML on different occasions. This is what I'm currently working on, finding the places where quill rerenders the HTML so I can again apply the CSS class but this is not ideal.
So if anyone has an idea I would really appreciate the help.
I know we can affect sibling and child elements with css but doesn't find a solution to affect a not relative div in my page with hovered an other.
for exemple:
<div class="salutsalut">
salut
</div>
will affect:
<div class="miammiam">
miam
</div>
I tried this javascript:
const child = document.getElementsByClassName("salutsalut");
child.onmouseover=function(){
this.getElementsByClassName('miammiam').style="border:10px solid blue"
}
If you have a different solution I'm open to,
and if something existe in css, this will be the best but don't think so.
thanks
CSS selectors only allow you to style a descendant element (space), a child element (>), an adjacent sibling (+) or a general sibling (~). It's not possible to express any other type of relation in CSS.
So for cases where you want to give a specific style to an element whose relation to the one that's being hovered can't be expressed with valid selectors, then you would have to use Javascript.
TL;DR: in this case it's not possible with CSS.
I have a card layout here: http://jesseddy.com/resource-library. I'm using a jQuery plugin called Tagsort (https://wch.io/projects/tagsort) to filter the cards based on tags. Functionally it works but visually the cards are meant to stack on the top when filtered, that specific bit is not working.
To see it how it's meant to work see this: https://wch.io/static/tagsort/demo-stacks/index.html
Use mine to see it not working: http://jesseddy.com/resource-library (filter using more than one tag).
I think I've identified the issue is that I am using list items in my layout but I am not sure how to fix it. Thank you!
The jQuery plugin only applies the display: none style to div.item because you initialized the plugin as such $('div.tags-container').tagSort({items: '.item', ... }) and only the DOM elements with the class item will be toggled. In your current version, the <li> elements are still present and take up space although the inner elements have been set to display: none.
You will have to change your markup and shift the class item and attribute data-item-tags to the <li> instead of the inner div.
For example lets say I have an HTML looking like the one below. Am I not selecting the parent element which is ul?
ul
margin: 50px
ul.test
li hello
li how are u
In order to understand what they mean you need to understand what selecting means in CSS (parent is easy :).
By selector they mean the element to which CSS applies. So, using CSS, if you have a selector (any selector), you cannot apply changes to any of the parent parts. You can only apply them to its last part. To the child (or, in some cases, to an immediate or distant following sibling).
(The simple rule here is that the part determining which element the styling will apply to is always the last part of the selector).
Let's take this simple selector:
ul {
/* rules apply to all ul */
}
I can make a rule to style up all it's children:
ul > * {
/* rules apply to * (all children of ul) */
}
But I cannot make a rule to style up its parent:
* < ul {
/* rules don't apply. this is invalid */
}
Whenever I make a rule, like...
* > ul {
/* rules apply to any ul that is a child of * (any element) */
}
the style always applies to the last item in the selector, never to one of the parents.
That's why there's no parent selector in CSS. You can't style a parent based on selecting one of its children. You need to select it. Got it?
Heck, I'll give you an example.
Consider this markup, but imagine it 10 times more complex (let's assume there's a bunch of guys adding/removing parts from it so it can have huge depth):
<div>
<whatever></whatever>
</div>
<span>
<whatever></whatever>
</span>
<ul>
<li>
<whatever></whatever>
</li>
<li></li>
<li>
<whatever></whatever>
</li>
</ul>
Now, please create a CSS that would make all parents (one single level ancestors) of <whatever> have a red background, no matter where they are in DOM. Can you?
Here's some news: you can't.
The closest they got to making this happen was when :has() selector has been proposed, but it's been rejected. This selector would need the CSS parser to go back, and it always goes forward. That's why it's fast, no matter the device/browser/system. CSS is always fast.
Because it has no :has() selector (or < combinator).
Additional note: As #Maximus has noted in comments, shadow DOM elements provide a method to select the top level element of the current shadow DOM instance by using :host. It's not a proper parent selector, as it doesn't provide means to select parent elements inside the shadow DOM, but only the entry point (the contact point with the normal DOM), giving you the option to apply rules to the current shadow DOM instance and not to others.
I am moving individual elements around using their style.top and style.left attributes. The issue is that when changing the style of one element it seems to change the style of others. What is an effective way to get round this?
I'm not sure why this happens, but I guess you selected the element by using a .class selector. Please make sure to select only one element. If you add / edit style-rules of that element, it does not change other elements sharing the element's classname.