How to remove rules from css/app.css with my css file? Options

[nilovsergey]

In laravel 8/ coreui 3.4 app page news

CODE

    <x-layouts.news>
        <x-slot name="title">{{ trans('News') }}</x-slot>
    
        ...
        <div class="news-content">{!! \Purifier::clean($news->content_shortly) !!}</div>
        ...
    
    </x-layouts.news>

is based on common app layout/css with resources/views/layouts/news.blade.php
template which has 2 css files include :

CODE

    ...
    <link rel="stylesheet" href="{{ mix('css/app.css') }}">
    <link rel="stylesheet" href="{{ mix('css/news.css') }}">
    ...

Problem is that when content_shortly of news has

<i> and <strong>

tags they are not rendered on the form and checking
the page in browser I see that these styles are used from parent html * { : https://prnt.sc/tiYMT3I1NFEo

I search a way to remove these html * { rules on my page BUT without editing css/app.css,


As I encountered this problem when user fills

CODE

    <i>

and

CODE

    <strong>

tags in ckeditor5

I added at top of my scss

CODE

    strong {
        font-weight: unset;
    }
    
    i {
        font-weight: unset;
    }

but that does not work anyway and in browser I see : https://prnt.sc/tTObhLlAvgUR


I tried to add style :

CODE

    html * {
        font-weight: unset !important;
        text-decoration: unset !important;
        font-style:  unset !important;
    }
    
    * {
        font-weight: unset !important;
        text-decoration: unset !important;
        font-style:  unset !important;
    }

But that also did not help - <i> and <strong> tags are not rendered at all...

[pandy]

I haven't really looked into the unset keyword and don't know how it fairs with inheritance, which would matter in the second example of what you tried. In your first example I think your selector has too low specificity. See if either using a more specific selector or to add !Important helps.

CODE

    strong {
        font-weight: unset !Important;
    }

[Christian J]

I didn't understand most of the OP (maybe because the screenshots didn't load), but when styling is inherited from a parent element the "unset" keyword may give special results. For example:

CODE

h1 {font-weight: normal;}

h1 strong {font-weight: unset;} /* Makes STRONG element inherit non-bold styling from parent H1. */

or:

CODE

p {font-weight: bold;}

p strong {font-weight: unset;} /* Makes STRONG element inherit bold styling from parent P. */

See also https://developer.mozilla.org/en-US/docs/Web/CSS/unset

[pandy]

I figured from one of the OPs tries to override and the screen cap that there are reset rules in play, 'html * ...'. Hence a single element selector wouldn't be enough.

[nilovsergey]

I didn't understand most of the OP (maybe because the screenshots didn't load), but when styling is inherited from a parent element the "unset" keyword may give special results. For example:

CODE

h1 {font-weight: normal;}

h1 strong {font-weight: unset;} /* Makes STRONG element inherit non-bold styling from parent H1. */

or:

CODE

p {font-weight: bold;}

p strong {font-weight: unset;} /* Makes STRONG element inherit bold styling from parent P. */

See also https://developer.mozilla.org/en-US/docs/Web/CSS/unset

My screenshots are loaded ok. Is my question clear ?

[Christian J]

I figured from one of the OPs tries to override and the screen cap that there are reset rules in play, 'html * ...'. Hence a single element selector wouldn't be enough.

But aren't these (partial) reset styles too:

CODE

    html * {
        font-weight: unset !important;
        text-decoration: unset !important;
        font-style:  unset !important;
    }
    
    * {
        font-weight: unset !important;
        text-decoration: unset !important;
        font-style:  unset !important;
    }

?

Anyway I read now that the STRONG and I elements are not rendered at all:

Problem is that when content_shortly of news has

<i> and <strong>

tags they are not rendered
...
But that also did not help - <i> and <strong> tags are not rendered at all...

--is that correct? If so "font-weight" or "font-style" should not matter, rather I suppose the CSS to look for would be e.g. "display: none", "visibility: hidden" or using the same text color as the background.

[Christian J]

My screenshots are loaded ok.

Yes, I see them now.

Is my question clear ?

Not entirely, but see my reply above this. I don't think any value of "font-weight" or "font-style" can prevent text from rendering.

[pandy]

]
But aren't these (partial) reset styles too:

CODE

    html * {
        font-weight: unset !important;
        text-decoration: unset !important;
        font-style:  unset !important;
    }
    
    * {
        font-weight: unset !important;
        text-decoration: unset !important;
        font-style:  unset !important;
    }

Where did you find those?

I don't think any value of "font-weight" or "font-style" can prevent text from rendering.

Isn't the text showing up at all? I didn't understand that. Sorry.

[Christian J]

Where did you find those?

In OP.