How to override css attribute-only style


Tags: css,css3

Problem :

I have a page that I need to modify some behavior. The element that I'm working on has a [attribute] directive, like this:

<div class="someClass" myAttributeDirective></div>

The myAttributeDirective has it's own css page that defines some styling, like this:

[myAttributeDirective] {
/* a few different properties */
border: 1px solid red;
position: relative;
}

/* then some more class stylings related to the directive */

So you see, in the css, it's defining some styles for JUST the attribute, so if the attribute exists in any element, apply those stylings.

When I view my element in Dev tools, it doesn't look quite right. In order to "fix" it, I un-check one of the css properties that is causing my issue, the position: relative;.

BUT

I can't change the "core" css for that directive, because it's used throughout the application. AND, if I try to override that property, it doesn't work (actually, cycling through the different position: * options only leads to making things look worse).

So, how do I override that specific property, without changing the core css file?



Solution :

If you want to override style in any case irrespective of which order style is applied, consider applying style inline in the div.

<div class="someClass" myAttributeDirective style="position:absolute;"></div>

    CSS Howto..

    How to apply a CSS class to another element when an object is hovered?

    How to make a tag go to the right as far as possible? [closed]

    How to add bootstrap css to my Wordpress plugin

    Bootstrap - how to clear css from element to start over?

    attaching div to a specific element for showing with javascript

    Ionic: how to use cssClass in $ionicPopup?

    How does the Meebo bar work so well cross-browser?

    How do I validate day and month?

    How to import css file for into Component .jsx file

    How to make somethings like this in CSS?

    What is .htc file ?How it works in Internet explorer

    How to add Background Image in css using master page

    How can set text row limit using angularJs ng-repeat?

    Rails: How to control CSS, Javascript files

    How to make an element's position absolute in page, despite an ancestor having absolute position

    How to bottom-align these divs?

    How to use Aural CSS?

    How to toggle class using jquery if else statement?

    How to create change image option on mousehover like in gmail account?

    How to move div from bottom to top

    How to prevent fixed button from overlapping footer area and stop the button on top of where the footer is located

    How to make a slider with divs and variable width?

    How to style all the same XSL FO elements? XSL FO like CSS?

    How do I set a different background to current tab?

    How to get a div positioned at the bottom of a table

    How can align css colums vertcally to the bottom?

    How do I make the text in the next line to be centered and not aligned to the left?

    How to target element which have spaces in it's class name css?

    How to set a image over another in the same tag via CSS?

    html, how to make elements not shift when browser zooms?