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.
Related
<q-carousel-slide
class="black-bg"
:name="1"
img-src="https://cdn.quasar.dev/img/mountains.jpg"
>
<div class="text-h5 text-white">Lacak Posisi Anda</div>
</q-carousel-slide>
I want to apply class black-bg only to q-carousel-slide without affecting the div.
If the div has a transparent or translucent background, or if it inherits its background from its parent, then nothing you can do to the q-carousel-slide element will change that.
If the stylesheet (or JavaScript) has rules which target descendants or children of elements which are members of a particular class, then nothing you can do to the HTML will change that.
(Obviously, moving the div so it to somewhere where it won't be affected by the above would work, but I doubt that's an option for you).
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 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.
I'm trying to dynamically find the width of an item which will have a css class with a specific width, in order to dynamically position its background image (a sprite). However, the item has not yet been added to the DOM. Is there a way to read a class's width property before it's added to the DOM?
I believe you cant. Instead add it to a test div,find the width and then remove the div.
$selector.append("<div id='test'></div>");
var widthVal= $selector.find("#test").width();
$("#test").remove();
selector is the element selector you may want to append to.
You can associate a class with the "test" div, to have it as "display:none"
This is a Little Hackie but it should work. Add it to the DOM with the CSS Attribute display: none so it will be invisible then you can read the with property and delete the element if need be after. Or change its state from Display:none.
Hope this helped.
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.