CODEWITHSUNDEEP
htmlcss
Neeraj
Neeraj

Reputation: 702

Apply css to all element except one who has specific parent

I want to apply CSS to all pages except sidebars. Let me show you an example

.page #buddypress ul.group li

I want to apply CSS to all <li> tags that are children of ul.group class. Problem here is that this class is also exist in sidebar and I don't want to change styling of sidebar. I just want to apply CSS to the page section and not to the sidebar.

I except some kind of :not(.class) operation to do that.

Here is what I am trying to do

.page :not(.sidebar) #buddypress ul.group li

But this trick doesn't work for me. I really appreciate if someone could solve my problem. I want to apply CSS to all sections except sidebar.

Here is what my HTML looks like:

<body>
<div id="buddypress">
<ul class="groups">
<li> </li>
</div>
<div class="sidebar">
<ul class="groups">
<li> </li>
</div>

Upvotes: 3

Views: 4045

Answers (2)

Zuber
Zuber

Reputation: 3473

Try this code

div:not(.sidebar) ul.group li {
  border: 1px solid red;
}
// Here i have used div, but you can use whatever tag you have used for sidebar
<body class="page">

  <div class="sidebar">
    <ul class="group">
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
  </div>
  
  <div class="page-section">
    <ul class="group">
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
  </div>
  
</body>

Upvotes: 6

H.J. Meijer
H.J. Meijer

Reputation: 389

You can override all css for that element by using its ID (css id overrides css class). A possibility would be:

#id{all:unset}

However, this has limited browser support and your specified element should have an ID.
See also: https://stackoverflow.com/a/36892781/9204431

Upvotes: 1

Related Questions