Apply css to all element except one who has specific parent

Question

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>

How does your HTML look? It's hard to know what to do, if we don't know the code :-) — razemauze, Apr 24 '18 at 07:41
please add your HTML code here. So, we can help you better... — RAJNIK PATEL, Apr 24 '18 at 07:42
Note that by using `.page :not(.sidebar) #buddypress li` you are saying `select

score 5 · Accepted Answer · answered Apr 24 '18 at 07:47

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>

score 0 · Answer 2 · answered Apr 24 '18 at 07:43

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

Apply css to all element except one who has specific parent

2 Answers2

Linked

Related