How CSS Styles Conflicts Between Selectors ?

Last Updated : 06 Jun, 2023

CSS conflicts between selectors occur when two or more selectors have conflicting styles applied to the same element, leading to unexpected results. In such cases, the browser has to decide which style to apply to the element. In this article, we’ll understand what causes conflicting styles in CSS, and how to avoid and resolve them.

Causes of Conflicting Styles in CSS: There are several ways that conflicting styles can arise in CSS. One common cause is using multiple stylesheets, either external or internal, that have overlapping or conflicting rules. When styles from multiple stylesheets are applied to the same element, the browser will have to decide which style to use, leading to conflicts.

Another cause of conflicting styles is the use of multiple selectors that apply to the same element. If these selectors have conflicting styles, the browser will have to decide which style to apply, based on the specificity and order of the selectors.

There are three reasons for CSS style conflict:

Specificity
Inheritance
!important

Specificity: The more specific selector will override the less specific one. Specificity is calculated based on the number of elements, classes, and IDs in the selector. For example, the selector with an ID has a higher specificity than the one with a class, and the one with a class has a higher specificity than the one with an element.

Syntax:

p {
    color: blue;
}

.special {
    color: red;
}

Example: In this example, we have two conflicting styles for the color property applied to the same element p.special. However, the .special selector has a higher specificity than the p selector, so the color: red style will override the color: blue style.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8" /> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0" /> 
    <style> 
        p { 
            color: blue; 
        } 
  
        .special { 
            color: red; 
        } 
    </style> 
</head> 
  
<body> 
    <p class="special">This is a red text.</p> 
</body> 
  
</html>

Output:

Specificity

Inheritance: Inheritance is the process by which styles applied to a parent element are passed down to its child elements. If two selectors have the same specificity, the one that comes later in the stylesheet will override the earlier one. If one of the conflicting styles is inherited, the browser will use the inherited style over the non-inherited style, even if the non-inherited style has a higher specificity or is defined later in the cascade order.

Syntax:

/* Style applied to the parent element */
.parent {
    font-size: 14px;
}

/* Conflicting style applied to the child element */
.child {
    font-size: 16px;
}

Example: In this example, the parent element has a font size of 14px applied to it, while the child element has a conflicting font size of 16px applied to it. However, because the font size is an inherited property, the child element will inherit the font size of 14px from the parent element, unless a more specific style is applied directly to the child element.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8" /> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0" /> 
  
    <style> 
        /* Style applied to the parent element */ 
        .parent { 
            font-size: 14px; 
        } 
  
        /* Conflicting style applied to  
        the child element */ 
        .child { 
            font-size: 16px; 
        } 
    </style> 
</head> 
  
<body> 
    <div class="parent"> 
        <p> 
            Parent element with font-size of 14px 
        </p> 
        <div class="child"> 
            <p> 
                Child element with conflicting  
                font-size of 16px 
            </p> 
        </div> 
    </div> 
</body> 
  
</html>

Output:

!important: The styles marked with the !important keyword will always take precedence over any other styles.

Syntax:

p {
    color: blue !important;
}

.special {
    color: red;
}

Example: In this example, we have two conflicting styles for the color property applied to the same element p.special. However, the color: blue !important style has the highest priority due to the !important keyword, so it will override the color: red style.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8" /> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0" /> 
    <style> 
        p { 
            color: blue !important; 
        } 
  
        .special { 
            color: red; 
        } 
    </style> 
</head> 
  
<body> 
    <p class="special">This is a red text.</p> 
</body> 
  
</html>