Question 201052 in Laravel Question posted in
The official Laravel Documentation can be found here.

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

In laravel 8/ coreui 3.4 app page news

<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 :

...
<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 and 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

If there is a way to remove these html * { rules on my page BUT without editing css/app.css,
but only news.css, as these rules are used on other pages of the app ?

Tags:

2

Answers


  1. 0

    You can add !important flag in your CSS file.

    .news-content,
.news-content > p {
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 24px !important;
}

    It will override the your parent CSS.

    Login or Signup to reply.
  2. 0

    use unset for every rule that you want to remove:

    * {
    font-weight: unset;
  }

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

    The unset CSS keyword resets a property to its inherited value if the property naturally inherits from its parent, and to its initial value if not. In other words, it behaves like the inherit keyword in the first case, when the property is an inherited property, and like the initial keyword in the second case, when the property is a non-inherited property.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search