Question

In this example you see a selector similar to apple devices.

When you click any number, you will notice that parent captures the click event instead of children.

This is because of the selector. Parent has a before pseudo selector which creates a new element to top.

.date_subsel:before {
  content:"";
  position: absolute;
  width: 206px;
  height: 41px;
  margin-top: -2px;
  background-image: -webkit-linear-gradient(left, hsla(0, 0%, 0%, 0.25) 0%, hsla(0, 0%, 0%, 0.10) 25%, hsla(0, 0%, 0%, 0.0) 50%, hsla(0, 0%, 0%, 0.10) 75%, hsla(0, 0%, 0%, 0.25) 100%);
  border: 1px solid rgb(185, 185, 185);
  border-radius: 4px;
  -webkit-box-shadow: inset 0px 0px 8px hsla(0, 0%, 8%, 0.5), 0px 3px 5px hsl(0, 0%, 69%);
}

How can I handle this and redirect the click event to its children?

Answer 1

Not sure if this is what you are after…. but simply adding a position property to the dates works.

    .date_subsel div > div {
      margin: 0 3px 0 3px;
      -webkit-box-flex: 1;
      border: 1px solid hsl(0, 0%, 68%);
      padding: 3px 8px 3px 8px;
      background-color: transparent; /* ------------ edited */
      text-align: center;
      font-size: 20pt;
      border-radius: 3px;
      box-shadow: 0px 0px 3px hsl(0, 0%, 20%);
      position: relative; /* ---------------------- added */
    }

updated Fiddle here