Query css for certain tags

Question

Query css for certain tags

Navigation

#1 by (3 votes)

3

I have the following:

<html ng-app="app">
    <head>
        <title>aprobado</title>
                <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
                <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css">
                <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script>
                <script src="/socket.io/socket.io.js"></script>
                <script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
                <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
                <script src="js/highcharts.js"></script>
                <style type="text/css"></style>
            </head>
            <body ng-controller="main">
                <div id="chart" style="width:100%; height:400px; padding: 150px 0px;"></div>
                <div id="container"></div>
            </body>
        </html>

The problem is that when I add the libraries of materialize they overwrite some styles of highcharts. In addition, the different svg is added.

How can I make the aforementioned libraries (those of materialize ) only affect certain tags?

html css svg materialize

asked by Kevin AB 07.07.2016 в 09:14

source

1 answer

Ajax PHP - ParserError "Unexpected token in JSON at position 0" Make a DIV follow you while you are browsing, being FLEXBOX and inside another DIV

score 3 · Answer 1

I know 3 ways you can be useful, although 3 I do not recommend:

1. The import order of CSS is important

If you have 2 CSS, the one that is defined more below has priority in its definitions as long as they are just as specific . To give a clear example and taking your definitions:

<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css">

If we define them in this order (what you currently have) that means that if, for example, both define:

CSS 1

body .p {
    width: 100%;
}

CSS 2

body .p {
    width: 50%;
}

You will only pay attention to CSS 2 because it is defined below and they are just as specific in your body .p tag.

2. Define tags more specifically.

If you have 2 CSS which is defined more below it has priority in its definitions as long as they are just as specific , with this specific, I mean:

CSS 1

body .p {
    width: 100%;
}

CSS 2

 body {
     width: 50%;
 }

So, how the CSS 1 is more specific than the CSS 2, all the elements p of the Body will have 100% of width although the body other than elements p will be at 50% of width.

3. Define CSS with! Important

Not recommended - Using the important tag in CSS usually involves misadjusted and problems in the future, as they always have priority and when you manage more than 1 CSS it can be a problem to find out why a style is not paying attention to you.

If in any CSS tag you put a !important it will give you priority ahead of anything.

With the example above:

CSS 1

body .p {
    width: 100% !important;
}

CSS 2

body .p {
    width: 50%;
}

Although the order is important, the !important tag makes CSS 1 have priority over any other CSS in this particular case.

In conclusion, if we put first the library materialize will have less priority than what comes next, but only if the tags are less specific or equal . If the tags are more specific than in your second CSS, the first library will have priority. If you define! Important in all the tags you want to have priority also have it fixed (but it is the least recommended to do so).