# Custom block library : component CSS selector (for drag & drop)

**URL:** https://forum.pinegrow.com/t/custom-block-library-component-css-selector-for-drag-drop/6383
**Category:** Blocks
**Created:** [March 14, 2022, 7:03am UTC](https://forum.pinegrow.com/t/custom-block-library-component-css-selector-for-drag-drop/6383 "2022-03-14T07:03:46Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![JoseFR](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/josefr/32/296_2.png) [@JoseFR](https://forum.pinegrow.com/u/JoseFR)
#### Post date: [March 14, 2022, 7:03am UTC](https://forum.pinegrow.com/t/custom-block-library-component-css-selector-for-drag-drop/6383/1 "2022-03-14T07:03:46Z")

</div>

Hello,

I created my own block library.

But I can’t get the right configuration combination for component CSS selector (for drag & drop).

 ![selector1](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/f/fc0612da1b21a731de01a86a12c4aba21a362632.jpeg)

The problem is that in your logic: the selector places it on the same div that will be dragged and dropped, and this is not a very practical situation: because the div itself is dragged and dropped.  
Imagine if you have multi-div content, or want to customize the block container with a border distinction, …  
It would make more sense to drag and drop the contents of the div.

Solution: add a checkbox in the “edit page library” configuration, to indicate that you have to drag the content and not the div itself 🙂

As you can see in this example: it makes no sense to create a special div for the drag-and-drop, and it makes no sense to embed the container div

 ![container2](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/c/c421e1c47c52a5b62d74b7858b1316aaba44715c.jpeg)

Thank you  
I wish you a good day

---

<div class="post-metadata">

### Author: ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)
#### Post date: [March 14, 2022, 9:45am UTC](https://forum.pinegrow.com/t/custom-block-library-component-css-selector-for-drag-drop/6383/2 "2022-03-14T09:45:43Z")

</div>

Hi @JoseFR,  
The components selector is able to take more complicated selectors. So for example, if you wanted the green section outlined above you could use the selector `.components-selector > *`. This is saying all the children of the element with the `components-selector` class. You can also use attributes if you don’t like using classes, but I don’t think the child combinator works with them.  
Cheers,  
Bob

---

<div class="post-metadata">

### Author: ![JoseFR](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/josefr/32/296_2.png) [@JoseFR](https://forum.pinegrow.com/u/JoseFR)
#### Post date: [March 14, 2022, 10:11am UTC](https://forum.pinegrow.com/t/custom-block-library-component-css-selector-for-drag-drop/6383/3 "2022-03-14T10:11:50Z")

</div>

Thank you @RobM for your feedback, sorry I hadn’t thought of the child selector, thank you Bob it works