Add CSS style to v-html

Question

I would like to add style to HTML code in a v-html. I tried several solutions but nothing functional :(

Here is my code:

Template :

<div
  class="para"
  v-html="value" 
/>

Script :

export default {
  data () {
    return {
      value : "<h2> TITLE </h2> <p> PARA </p>"
    }
  },
}

Style :

.para >>> h2 {
  color: blue;
}

.para >>> p {
  color: red;
}

Thanks in advance !

I am not too sure if `>>>` is a valid css selector combinator. Did you mean to use `>` ? — Suresh, Apr 17 '20 at 09:39
On the other topics, they use >>> each time for the case https://medium.com/@brockreece/scoped-styles-with-v-html-c0f6d2dc5d8e — Testostas, Apr 17 '20 at 09:41

Dan · Accepted Answer · 2020-04-17T10:01:28.993

5

If you're using scoped style without SASS, use the >>> combinator this way:

>>> .para > h2 {
  color: blue;
}

>>> .para > p {
  color: red;
}

If you're using scoped style with SASS, use the ::v-deep combinator:

::v-deep .para > h2 {
  color: blue;
}

::v-deep .para > p {
  color: red;
}

Otherwise:

.para > h2 {
  color: blue;
}

.para > p {
  color: red;
}

Here is a demo

edited Apr 17 '20 at 10:01

answered Apr 17 '20 at 09:52

Dan

score 1 · Answer 2 · answered Apr 09 '23 at 07:43

2023 Edit Using Vue 3 + Vite: you will now get this warning when you try to use the solution above:

[@vue/compiler-sfc] ::v-deep usage as a combinator has been deprecated. Use :deep(<inner-selector>) instead.

So, use this instead

:deep(.para > h2) {
  color: blue;
}
:deep(.para > p) {
  color: red;
}

2 Answers2