Answers.Body: <p>Your question is actually about the basics of how css works, and not specific to SearchKit. In css, ids take priority over classes. I suggest you read up on <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity" rel="nofollow noreferrer">css specificity</a>, but the quick answer is you can add <code>!important</code> at the end of your rules.</p>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2024-09-17T13:20:22.513Z
Answers.Text: I’m not sure I understand - both the selectors shown here are using classes, `.crm-search-display-grid-layout-3` and `.crm-search-display-grid-container` specifically.
Answers.UserDisplayName: Ken Williams
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2024-09-17T17:41:25.390Z
Answers.Text: Well, adding `!important` will do what you want. But to answer your question: if specificity is the same (e.g. both selectors use a single class) then the order of the files matters. You could try adding your css file to the page footer instead of the header.
Answers.UserDisplayName: Coleman
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2024-09-19T03:14:19.630Z
Answers.Text: I guess my question is more like "how am I *supposed* to style SearchKit results", without using precedence overrides like this.  It definitely is working now for me, but it doesn't seem like the natural or intended way for it to work.
Answers.UserDisplayName: Ken Williams
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2024-09-17T10:50:04.260Z
Answers.LastActivityDate: 2024-09-17T10:50:04.260Z
Answers.UserDisplayName: Coleman
Body: <p>I'm using WordPress 6.6.2 (self-hosted) and CiviCRM 5.76.2.  I'm exposing a SearchKit result as a grid, and I want to do some styling on the result.  As suggested in <a href="https://civicrm.stackexchange.com/a/45252/295">https://civicrm.stackexchange.com/a/45252/295</a>, I've added a custom CSS file with my desired styles:</p>
  <pre><code>.crm-search-display-grid-layout-3 {
    align-items: start;
    justify-items: start;
  }
  </code></pre>
  <p>I'm loading my custom CSS by setting the &quot;Custom CSS URL&quot; property in the &quot;Settings - Resource URLs&quot; screen.</p>
  <p>It's getting loaded in the browser, but it appears to take lower precedence than CiviCRM's hard-coded file <code>crmSearchDisplayGrid.css</code>:</p>
  <img src="https://i.sstatic.net/G4NmwpQEl.png" width="300" alt="browser dev tools showing precedence">
  <p>Is there something I can do to change this precedence?</p>
  
Tags: <wordpress><searchkit><css>
Title: How to override CSS in SearchKit results
ThreadText: # How to override CSS in SearchKit results
  
  (Asked by: username_0 on 2024-09-17)
  
  I'm using WordPress 6.6.2 (self-hosted) and CiviCRM 5.76.2.  I'm exposing a SearchKit result as a grid, and I want to do some styling on the result.  As suggested in https://civicrm.stackexchange.com/a/45252/295, I've added a custom CSS file with my desired styles:
  .crm-search-display-grid-layout-3 {
    align-items: start;
    justify-items: start;
  }
  
  I'm loading my custom CSS by setting the "Custom CSS URL" property in the "Settings - Resource URLs" screen.
  It's getting loaded in the browser, but it appears to take lower precedence than CiviCRM's hard-coded file crmSearchDisplayGrid.css:
  
  Is there something I can do to change this precedence?
  
  **Tags:** wordpress, searchkit, css
  
  
  ---
  
  ## 1 answers
  
  ### Answer by username_1 on 2024-09-17. Score: 1 | Accepted answer
  
  Your question is actually about the basics of how css works, and not specific to SearchKit. In css, ids take priority over classes. I suggest you read up on [css specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity), but the quick answer is you can add `!important` at the end of your rules.
  
  > **Comments:**
  > **username_0**: I’m not sure I understand - both the selectors shown here are using classes, `.crm-search-display-grid-layout-3` and `.crm-search-display-grid-container` specifically.  
  > **username_1**: Well, adding `!important` will do what you want. But to answer your question: if specificity is the same (e.g. both selectors use a single class) then the order of the files matters. You could try adding your css file to the page footer instead of the header.  
  > **username_0**: I guess my question is more like "how am I *supposed* to style SearchKit results", without using precedence overrides like this.  It definitely is working now for me, but it doesn't seem like the natural or intended way for it to work.  
  
  ---
  
  