CSS style priority

Question

Before this question, I already search 'CSS priority' and I found following

The priority of inline style like <div class="blue" style="color:red;"> is higher than class blue which define color:blue; And this rule is still work between tag and inline, i.e., inline has higher priority than tag.

Now I encounter a obstacle that I don't know. Here, simple example of my case.

First there are <div>s

<div></div>
<div></div>
<div></div>

and they have CSS

div { backgorund:url('path') no-repeat; }
div:nth-child(2n+1) { background-position: 'position A'; }

Now first and third <div> has same background image at position A. Then I tried change third <div>'s background like

<div></div>
<div></div>
<div style="background-position: 'position B';"></div>

But the inline style of third <div> is not applied, still the :nth-child's style occupy it. (third <div> still has background-position with 'position A')

I want to change third <div>'s background image that only has different background position. How can I do this?

(I know the priority of inline style is always higher than any others. But in this case, it does not work)

for specification here my code

#courseList li { background:url('path') no-repeat; }
#courseList > li:nth-child(2n+1) {
    background-position:-5px -438px;
}
#courseList > li:nth-child(2n+2) {
    background-position:-187px -438px;
}

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li>
        <div style='background-position:-551px -438px;'></div>
    </li>
</ul>

Possible duplicate of [Different levels of CSS and the priority over each other](https://stackoverflow.com/questions/5039020/different-levels-of-css-and-the-priority-over-each-other) — LF00, Jun 07 '17 at 02:08
@JefréN. Yes..? I use position A as -100px -20px for example and position B as similar — wallah, Jun 07 '17 at 02:12
Could you modify your example to show **exactly** what your CSS rules look like? — J. Allan, Jun 07 '17 at 02:13
@JefréN. oh... there is thing I don't know. your asking is big help to me! Before apply the `priority`, the applied tag is important. In my case I apply `inline style` on `child tag` not `target tag` — wallah, Jun 07 '17 at 02:21

Syden · Accepted Answer · 2017-06-07T02:34:05.473

1

EDITED to your scenario (used background color for better illustration, you can simply replace them for position):

#courseList>li:nth-child(2n+1) {
  background: red;
}

#courseList>li:nth-child(2n+2) {
  background: green;
}

<ul id="courseList">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li style='background: blue;'>
    <div></div>
  </li>
</ul>

Here's a generic example:

div {
  background: red;
  height: 50px;
  width: 50px;
}

div:nth-child(2n+1) {
  background: blue;
}

<div></div>
<div></div>
<div style="background: green;"></div>

edited Jun 07 '17 at 02:34

answered Jun 07 '17 at 02:16

Syden

8,425
5
26
45

1

Oh... there is big mistake. I apply inline style not on same position as your example. I applied it in the `child tag` thanks!!! I realize – wallah Jun 07 '17 at 02:19

score 0 · Answer 2 · answered Jun 07 '17 at 02:24

#courseList li { background:url('path') no-repeat; }
#courseList > li:nth-child(2n+1) {
    background-position:-5px -438px;
}  
#courseList > li:nth-child(2n+2) {
    background-position:-187px -438px;
}

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li>
        <div style='background-position:-551px -438px;'></div>
    </li>
</ul>

Here is my case. The inline style of div do not work since <div> is not target I think.

And, next code follow the rule

#courseList li { background:url('path') no-repeat; }
#courseList > li:nth-child(2n+1) {
    background-position:-5px -438px;
}  
#courseList > li:nth-child(2n+2) {
    background-position:-187px -438px;
}

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li style='background-position:-551px -438px;'>
        <div></div>
    </li>
</ul>

CSS style priority

2 Answers2