How to include plus sign in CSS class name in selector

Question

I don't know how to place a "+" in my CSS. Take a closer look at the "Donator+" div.

body
{
     margin: 0;
     padding: 0;
     font-family: "Arial", serif;
} 

.nav
{
     background-color: #595959;
     color: #ffffff;
     list-style: none;
     text-align: center;
     padding: 20px 0 20px 0;
     border-bottom: 3px solid #1b1b1b;
}

.nav > li
{
     display: inline-block;
     padding: 0 25px 0 25px;   
}

.nav > li > a
{
     text-decoration: none;
     color: #ffffff;
}

.nav > li > a:hover
{
     color: #1b1b1b
}

.line
{  
     width: 100%;
     height: 0;
     border-bottom: 2px solid #353535;
}

.image
{
     display: block;
     max-width: 100%;
     height: auto;
}

div.vip
{
    vertical-align: top;
    display: inline-block;
    text-align: left;
    width: 190px;
    height: 215px;
    margin-left: 350px;
    margin-top: 70px;
}

div.price-vip
{
     font-weight: bold;
     font-size: 85%;
}

div.name-vip
{
     margin-top: 20px;
     font-size: 85%;
     font-weight: bold;
}


div.donator
{
     vertical-align: top;
     display: inline-block;
     text-align: left;
     width: 190px;
     height: 165px;
     margin-left: 320px;
     margin-top: 70px;
}

div.price-donator
{
     font-weight: bold;
     font-size: 85%;
}


div.name-donator
{
     font-size: 85%;
     font-weight: bold;
     margin-top: 20px;
}

div.donator+
{
     vertical-align: top;
     display: inline-block;
     text-align: left;
     width: 190px;
     height: 165px;
     margin-left: 320px;
     margin-top: 70px;      
}

div.price-donator+
{
     font-weight: bold;
     font-size: 85%;
}

div.name-donator+
{
    margin-top: 20px;
    font-size: 85%;
    font-weight: bold;
}

What are you trying to accomplish with that symbol? Is it part of your class name? — imjared
– imjared, Commented Nov 19, 2016 at 15:16

score 3 · Accepted Answer · 2016-11-20 06:20:54Z

3

You just need to escape the character in your selector:

div.name-donator\+ {

but don't escape it in the HTML:

<div class="name-donator+">

edited Nov 20, 2016 at 6:20

answered Nov 19, 2016 at 16:45

user663031

Sign up to request clarification or add additional context in comments.

Comments

frnt · Accepted Answer · 2016-11-19 15:21:50Z

0

See I don't know what you are trying, but here is little explanation regarding css + selector,

element + element - selects all elements that are immediately placed after another element parent element, not parent element and child inside of it, to select and style child element you have to use css > selector.

.div1{
  width:200px;
  height:200px;
  background:#111;
}

.div2{
  width:200px;
  height:200px;
  background:#f2f;
}

.div1 + .div2{
  background:#f22;
}

<div class="div1"></div>

<div class="div2"></div>

answered Nov 19, 2016 at 15:21

frnt

8,9232 gold badges27 silver badges28 bronze badges

3 Comments

user663031 Over a year ago

This is not the question. He is wondering about using a plus sign in a class name (I think).

frnt Over a year ago

@torazaburo might be.

frnt Over a year ago

@torazaburo OP hasn't answered on that yet, if OP clears that the answer given by you is what he was searching for then I will remove mine and it get easy for upcoming users to refer correct method of doing that.

Collectives™ on Stack Overflow

How to include plus sign in CSS class name in selector

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related