Hide certain objects on an APEX page

A few days ago I got a question on how to hide the title row from the Interactive Report Pivot view.
So the person didn't want to show the red area:

The solution to this problem is to add the following CSS to your page:

table.a-IRR-table--pivot tr:nth-child(3) {
    display:none;
}

The result is this - the title is gone:

Doing this blog post is not about giving the solution to the above problem. I find it more important to show you the process to come to your answer. It comes down to find the right elements on the page which you can manipulate with CSS or JavaScript. To hide something, you can either use CSS with display: none or a JavaScript function (or JQuery hide()). The first thing you do is a search for the element. You want to use the Developer Tools of your browser for that. Most of the time you can right click on your page and do Inspect Element. The browser will show the HTML that is behind what you see on the page.

In the above screenshot, I see that row is a TR in a Table.
So the next step is to find a way to select that element. Typically you would use the id or class tag and look that up. The TR in our case doesn't have any of those, so I went up a line in the hierarchy until I find a good selector. The table has a class a-IRR-table--pivot which we can use.
Once we have the selector, we want to go to the real element, so we navigate back down. Now you need to know a bit of JavaScript or CSS or search on the internet how to do that. You can add elements after each other and it will drill down in the hierarchy again.
In our case, the TR is the third TR in the table, and there's a function to select that, which I used in CSS (nth-child).

If this is all new to you, learning about JavaScript and CSS selectors is a great start. For example, W3School is a nice site to get started learning more about HTML, CSS, JavaScript, and general web.


Note that in Oracle APEX, you can also use a dynamic action to hide or show certain elements. A dynamic action is a declarative way to do JavaScript, so when you use the Hide / Show in a dynamic action, behind the scenes it will do the necessary call for you. If the item or region is not known for APEX you would use the same technique as I described above to find the right element which you can reference in the dynamic action with a JavaScript selector (. for class # for id).
Typically doing something with CSS is more performant than doing it with JavaScript, but it all depends on your use case what technique makes sense to use.