CODEWITHSUNDEEP
htmlcss
76987
76987

Reputation: 523

CSS: shortening the :before pseudo-element?

I'm a bit of a beginner, and I'm using :before for paragraph numbers. I have different styles for paragraphs, and I want some paragraphs to be numbered, and other paragraphs to be un-numbered. Here's a toy example: http://jsfiddle.net/afdBk/

My question is: do you know of a way to avoid putting the same lengthy :before litany after every paragraph type I want to be numbered? Could I simply make up a selector for it (something like .pgfno), put all the styling there, and then call back to this selector in the :befores? This would make things a lot cleaner and easier to read.

Thanks.

Upvotes: 2

Views: 115

Answers (1)

zneak
zneak

Reputation: 138031

You can assign rules to multiple selectors at once: (jsFiddle)

.maintext p.type1:before, .maintext p.type2:before, .maintext p.type3:before {
    position: absolute;
    text-indent: 0px;
    left: 45px;
    padding-top: 1px;
    font-size: 80%;
    color: #888888;
    counter-increment: pgf;
}

You can also set several classes on one single element (jsFiddle):

.numbered:before {
    position: absolute;
    text-indent: 0px;
    left: 45px;
    padding-top: 1px;
    font-size: 80%;
    color: #888888;
    counter-increment: pgf;
    content: counter(pgf);
}

<p class="type1 numbered">Lorem ipsum dolor sit amet...</p>

Upvotes: 3

Related Questions