Here's the situation:

  • On prem SharePoint 2013
  • Creating custom page layout for a group within our company.
  • They want the styling to always be the same for headers, pictures, etc.

Here's what I've done:

  • Created the custom page layout
  • Setup some div tables to keep it neat
  • Added the webpartzone and webpartpages that I need
  • All renders well and lets me do my thing
  • Grouped some of the webpartpages together within the same webpartzone (this may be my problem).

I need a way to target the specific webpartpages with CSS, but haven't found a way, since I cannot include any sort of html inside the webpartzone.

Does anyone know of a way to target the webpartpages efficiently or do I need to go back and create a webpartzone for each webpartpages and wrap that in a -type tag?

1 Answer 1


The answer lies not in the SPD code, but in the code rendered to the DOM. There are several classes that SharePoint tacks on during the final render, but the ones I found most useful for styling are the .ms-webpart-zone and .ms-webpartzone-cell classes.

<div class="whatever">
    <div class="ms-webpart-zone ms-fullWidth">
        <div id="MSOZoneCell_WebPartWPQ2" class="s4-wpcell-plain ms-webpartzone-cell ms-webpart-cell-vertical ms-fullWidth ">

This is what is rendered in the final version of the page. To apply CSS, you would use the following selector:

.whatever .ms-webpart-zone .ms-webpart-cell {
    color: red;

From there you can use first-child and other specific selectors to accomplish the needful.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.