Targeting a Single Web Part with CSS

An important thing to note about using the CSS in general is that it saves a ton of time styling individual elements, and let you easily set a style for everything on the page.  Where this gets complicated is if you have multiple web parts on the page and dont want to modify all of them and would rather specify which one the CSS code modifies.

For example, if you were to add the following code to a SharePoint page, your CSS would be applied to all content on the page that was styled using the selector .someCSS{}.

<style>
 
.someCSS{
 
property: value;}
 
</style>

 

In order to make our CSS only apply to a specific web part on the page, we need to add in a declaration.  That is done using the following string: #MSOZoneCell_WebPartWPQXXX, (where XXX is the number in the div id of the web part on the page.)

<style>
#MSOZoneCell_WebPartWPQ2
.someCSS{
 
property: value;}
 
</style>

Here’s how to find out the number to add to the #MSOZoneCell_WebPartWPQXXX string.

  1. Use developer tools in Chrome (F12 when viewing a page).
  2. Choose the element selector in the top left corner of the developer tools window.
  3. Click the web part you want to target with your CSS code.
  4. You’ll see something like the image below.  The div id contains the number to add to the end of that string.

Leave a Reply

Your email address will not be published. Required fields are marked *