CODEWITHSUNDEEP
htmlcsscss-selectors
FvB
FvB

Reputation: 723

Exclude stylesheet

For an application I'm developping, I want to build in the functionality to generate an invoice. This invoice is configurable, and I want to show a preview in my page. Based on the data I send back to my C# back-end, I will generate a .PDF file which will be made available for downloading.

In the back-end generation process, I will have no access to my stylesheet and will have to define all my classes completely inline. Because I want my preview to truly match what the invoice will end up looking like, I need to be able to exclude all other styling from the preview element.

Is there a way to do this?

Example:

<link href="Content/style.css" rel="stylesheet" />
<div>
    <p>Use classes defined in style.css</p>

    <div EXCLUDE CSS OUTSIDE THIS SCOPE>
        <p>No access to style.css</p>
    </div>
</div>

I understand that I could achieve the desired effect by simply making sure the previewer is placed outside of the scope where I inject my CSS, but due to the structure of my project, this is not an option.

Extra info:

I'm using a stylesheet purchased by the company I'm doing this project for. The stylesheet is very poorly set-up, however, and includes all sorts of default styling like:

table {
    color: black !important;
}

I'm looking for a way to exclude all that styling without having to individually overwrite every property set in that stylesheet.

Upvotes: 2

Views: 4673

Answers (4)

yugi
yugi

Reputation: 874

If you don't need apply styling of .css file in page.just add disabled =true attribute .so that it won't apply the styling from that file.

see the link stackover link for reference.

<link rel="stylesheet" href="yourstyleXXX.css" disabled =true />

Upvotes: 0

Johannes
Johannes

Reputation: 67778

There is the all property, and the initial value to reset a property to the default settings of the browser. So if you wrap the part you want to be "excluded" from your styles into a tag to which you apply a class like the following (i.e. combined with the * selector), it should have the effect you want:

.unset * {
  all: initial;
}

And in the HTML:

<div>
    <p>Use classes defined in style.css</p>

    <div class="unset">
        <p>No access to style.css</p>
    </div>
</div>

But unfortunately, all does not yet work in IE/Edge, it's "under consideration": http://caniuse.com/#search=all

Still, if your stylesheet doesn't use too many different properties (and if you know them), you could list those, define all of them as initial and apply it, using a selector as shown above. Example:

.unset * {
  font-size: initial;
  color: initial;
  background: initial;
  text-decoration: initial;
  margin: initial;
  padding: initial;
}

Upvotes: 5

rakwaht
rakwaht

Reputation: 3967

You can try to use the :not() selector and add it to each class in your CSS. Here is a simple example

div p:not(.secondParagraph){font-style:italic}
<div>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  <p class="secondParagraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

For your problem you may do something like that:

Select elements with class "myClass" excluding those that are immediate children of elements with ID "myID" is:

*:not(#myID) > .para

However, the :not() selector is not supported in IE8 or less. look here for details about it.

Upvotes: 0

T.Lowly
T.Lowly

Reputation: 54

You could use ID like Gezzasa said.

<div id="expluded">
    <p>Something.</p>
</div>

In css get new class as in.

#expluded {

put your parameters hare.

}

Upvotes: -1

Related Questions