How do I target custom CSS to a certain page/element?

[Heyhoe]

So, I want to change how some elements are displayed on mobile.

I know it's possible to apply custom css to a certain page/template but I don't know the actual proper way to do this.

I know how to write the CSS to take effect on mobile but I can't target it for use in one area.

For example, I would like to change the padding on my index so my images etc stretch the full width of the screen, but I don't want to effect the padding throughout the whole suit.

I know I could create a new CSS class and change this in the template but I want to keep all customizations in custom.css to prevent errors and loss of customization when upgrading.

Any help is appreciated. 

Thanks.

 

 

 

 

[Heyhoe]

To add, my home page "index" is actually a page created in pages.

I have managed to use .ipsApp_front[data-pageapp=cms] to select the whole pages app but cannot find the selector which can select an individual page.

Most of my changes I only want to apply to my "homepage" how can i select this?

[steve00]

To add, my home page "index" is actually a page created in pages.

I have managed to use .ipsApp_front[data-pageapp=cms] to select the whole pages app but cannot find the selector which can select an individual page.

Most of my changes I only want to apply to my "homepage" how can i select this?

Not tested but could try:

[data-pageapp="cms"][data-pagecontroller="index"] 

obviously change the index to your page