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 !

Answer 1

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

Answer 2

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;
}