How does deselection work exactly?

Help and Support
1

Hello,

I need to understand how deselect works exactly and want to know if what I want to do is possible.

I know that I can select a parent element and then deselect some children inside it.
But is it possible to select X elements and filter those elements by deselecting some of them?

https://output.jsbin.com/ruhuyed/

Here is an example, how would I select only prices before the hr tag?

image
image1567×429 22.9 KB

I tried deselecting the prices after the hr tag but the preview still shows it. It seems I can only remove elements from inside selected items.

Thank you in advance for any advice you can give me :slight_smile:

1 Like
2

Hello @detectthis, thanks for sharing your use case. A deselection is used to exclude elements within an existing selection.

I could not access the example page on jsbin. Based on the screenshot, you can use following CSS selector to filter out the elements that you don’t need:

article.price:first-child, :not(hr) ~ article.price

I added article.price:first-child in case the first one is not preceded by any sibling element.

Will this work?

3

Hello, thank your for your answer

Sorry for the non-working jsbin, apparently a bug that can happen on their side. I opened an issue on their github.

Your answer wasn’t what I was looking for exactly (as it selected all prices) but it helped me find the solution :slight_smile:

.price:not(hr ~ article .price) (I learned that complex selectors are now possible in :not)

Thanks!

4

Sounds good! I didn’t notice the space between article and .price earlier. What you have makes sense. Cheers!