CSS - the styling properties of the class should not affect the child components

I am working on a Parent component that contains two child components. Each component utilizes accordion-groups for its functionality. I have created a specific class for styling purposes in my stylesheets, but I want this class to only apply to the parent component and not the child components. However, despite using the :not selector, the class is being applied to the entire page including the child components.

Custom Class

accordion-group :not(app-child){
    .panel-heading {
        height: 44px;
        display: flex;
        align-items: center;
        width: 100%;
        padding-left: 20px;
    }

    .panel-body {
        padding-top: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .panel-title {
        width: 100%;
    }
}

Example in HTML

   <accordian>
    <accordion-group>
       <div class="panel-heading"> 
          <div class="panel-title"> 
            <app-child> 
             <accordian>
              <accordion-group>
               <div class="panel-heading"> 
                <div class="panel-title"> 
                ...
                </div>
               </div>
              </accordion-group>
             </accordian>
            </app-child>
          </div>
       </div>
    </accordion-group>
   </accordian>

Adding Another Simple Example

HTML

<div class="acc"> 
   <span class="acc">span1</span><br>
   <span class="acc">span2</span>
   <div>
      <span class="acc">span3</span><br>
      <span class="acc">span4</span>
   </div>
</div>

CSS

div:not(div){
border:solid black;
}

My goal is to have the class applied only to span1 and span2, and not to span3 and span4.

cssangular

Answer №1

this specific CSS rule will apply styles to span1 and span2 only

.custom>:not(div) {
  border: solid black;
}
<div class="custom">
  <span class="custom">span1</span><br>
  <span class="custom">span2</span>
  <div>
    <span class="custom">span3</span><br>
    <span class="custom">span4</span>
  </div>
</div>

Answer №2

Make sure to eliminate any spaces before the :not selector

.acc:not(span) {
  border: solid black;
  }
<div class="acc">
  <span class="acc"> Span1 </span> <br>
  <span class="acc"> Span2 </span>
</div>

observe the contrast: the first block of code is free of spaces, while the second block has spaces included

.acc :not(span) {
  border: solid black;
}
<div class="acc">
  <span class="acc"> Span1 </span> <br>
  <span class="acc"> Span2 </span>
</div>

Update: In reference to your edited example. In this case, you could utilize .acc > .acc{} (this would specifically target children with the class "acc" under parent elements with the class "acc")

Exploit the various CSS selectors available, you have the flexibility to combine them as needed.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it feasible to have fixed headers adopt the width property?

Is there a way to align the widths of table elements while maintaining a fixed header row? If the 'fixed' property is disabled, the width spaces correctly but the header won't stay fixed and will scroll out of the container div. Enabling the ...

htmlcsshtml-tablewidthfixed-header-tables

When validating storage content, session value appears as null

I have been working on developing an Ionic app that requires creating a session for user login. The goal is to store the user's name upon logging in, so it can be checked later if the user is still logged in. I have created a model class and a user cl ...

angulartypescriptsessionionic-framework

The calculator program fails to compute the width

My table has 4 columns with different widths: column 1: fixed width of 500px; column 2: calc(33% - 165px); column 3: calc(33% - 165px); column 4: calc(33% - 165px); Despite having the same value for the last 3 columns, their actual widths are different. ...

htmlcss

The html-duration-picker is not being displayed in the proper format

I've been working on integrating an external library that allows for inputting document length. Specifically, I'm using the html-duration-picker library, but it seems like the input functionality is not quite right for durations. Could it be th ...

javascriptangulartypescript

Angular Material Dropdown with Multi-Column Support

I'm working on customizing the selection panel layout to display items in multiple columns. However, I'm facing an issue where the last item in each column appears off-center and split, causing overflow into the next column instead of a vertical ...

cssangularangular-materialmultiple-columns

At what point do we employ providers within Angular 2?

In the Angular 2 documentation, they provide examples that also use HTTP for communication. import { HTTP_PROVIDERS } from '@angular/http'; import { HeroService } from './hero.service'; @Component({ selector: 'my-toh&ap ...

typescriptangular

Creating artwork: How to resize images without losing clarity

Struggling to display an image in a canvas element that needs to be a certain percentage of its parent container's width. Despite my efforts, the image seems to blur once added to the canvas, which is not the desired effect. I attempted to disable th ...

javascripthtmlcsscanvas

Injecting Dependencies in Angular 2 Without Using the Constructor

Exploring DI in Angular 2 has led me to implement a REST-Client using generic subtypes for concrete Datatypes like this: class RESTClient<T>{ constructor() { var inj = ReflectiveInjector.resolveAndCreate([HTTP_PROVIDERS]); this. ...

angulartypescriptdependency-injectionsingleton

We are currently moving up from NG 12 to NG 16 and encountering an issue with the package "@ng-bootstrap/ng-bootstrap" due to an incompatible peer dependency

When attempting to upgrade from Angular version 12 to version 13, we encountered some dependency errors. Following the instructions at https://update.angular.io/?v=12.0-13.0, we tried running ng update @angular/core@13 @angular/cli@13. We received the fo ...

angularng-bootstrapng

What could be causing the vertical centering issue with my text inside a bootstrap row div?

I have a Bootstrap row and I'm attempting to center some text vertically, but it's only centered horizontally. Current Layout: https://i.sstatic.net/XcqHi.png Desired Layout: https://i.sstatic.net/ZegKG.png The second image shows the phrase "c ...

htmlcssalignmentbootstrap-5

Three.js and Angular - the requested function cannot be found

In my latest project, I created a basic application using Angular 4 and three.js to display a cube. The main part of the code resides in an Angular component called ViewerComponent, where the cube is rendered. I've simplified the relevant part of the ...

angularthree.jsfrontendangular-components

Content from PHP's unlink() function continues to persistently display

I run an Angular front end along with a PHP back end for my website. I utilize PHP's unlink function to remove specific images from Angular's assets folder: $fileToDelete = "../src/assets/images/".$name; unlink($fileToDelete) or die("Error delet ...

phphtmlangular

Edit CSS attributes within Angular 2+ framework

When using jQuery, we have the ability to do the following: JQuery('.someStyle') .css({"background", "red"}) This allows us to directly change the CSS property in style. While working with Angular 2+, we can use [style.<property>] for ...

javascriptangularangular2-template

What is the method for tallying CSS page breaks in printed HTML documents?

Currently, for my report generation process using HTML and CSS to manage page breaks dynamically. I've enabled the option for users to print multiple reports at once by combining them into different sections within a single HTML document. This helps p ...

javascripthtmlcssprinting

Tips for positioning a Material UI Button and TextField side by side, perfectly aligned on the same line and height

I am currently working on aligning a <Button> from the Material UI library so that it is positioned at the same height as the <TextField> next to it and perfectly aligned with that field. Both the <Button> and the <TextField> are e ...

cssreactjsmaterial-ui

Guide to implementing the collapsible start and stop button feature in Angular

Having an issue in my Angular application with the dashboard page. I've created a button for start or stop (toggle functionality) but it's not working as expected. .component.ts toggleCollapse(jammer) { this.jammer.isCollapsed ? 'START& ...

javascriptangulartypescripttwitter-bootstrapbootstrap-4

Change the selection box to a checkbox

I am struggling to retrieve the value of a selection box inside jQuery. Specifically, I need to access the selection box value within a function that triggers on a checkbox change event: This is what I have so far: $('input').on('change& ...

javascriptjqueryhtmlcss

Issue with Declarations in component's module causing functionality to not work as expected

After extensive searching, I couldn't find a solution to this particular issue. Here's the problem: As a beginner working on an Angular project for practice, I have a module named "AppMaterialModule" where I consolidate all Angular material comp ...

angularangular-materialangular-module

Heroku encounters issue with Node.js and Angular build process

I have encountered an issue with my app deployment. Everything works fine locally, but when I try to deploy, the build fails and generates the following output log: -----> Node.js app detected -----> Creating runtime environment NPM_CONFIG_ ...

angularherokunpmdeploymentpackage.json

Displaying exclusively distinct values in the selection box/dropdown menu

My goal is to retrieve data from the SQL server database and populate the corresponding fields on the frontend. While I am able to fetch the data, some fields in the response contain duplicate values in the dropdown menu. Here is an example of how my Compo ...

javascriptangulartypescriptangular7