CODEWITHSUNDEEP
css
Web Dude
Web Dude

Reputation: 85

How can I write this CSS more efficiently?

This code works but I suspect that it is not the way it should be written:

.srtbl-qt  {
    text-align: left;
}

 caption { text-align: left;
}

I tried writing it like this but it didn't work

.srtbl-qt caption {
    text-align: left;
}

What is a good way of writing it?

Upvotes: 2

Views: 50

Answers (6)

Mahesh
Mahesh

Reputation: 26

Use a comma to seperate selectors:

.srtbl-qt, caption {
    text-align: left;
}

Upvotes: 1

Matt
Matt

Reputation: 879

Alternatively, you can think of your .css files as Libraries in which you can reuse classes. By Creating one class such as '.left' in this example, you could apply this class in both html tags that require text-alignment to the left.

styles.css

.left {
text-align: left;
}

page.html

<body>
<p class="left">paragraph</p>
<img src="picture.jpg" class="left" />
<section class="left otherClass">This is a section</section>
</body>

CSS is designed for RE-USE, so re-use classes that achieve the same thing rather than writing one with a different name. Each tag can have many classes, the one that appears last will override any class that has a collision (same style) inside the class.

Upvotes: 1

Rahul Tripathi
Rahul Tripathi

Reputation: 172378

Try like this by concatenating them using a comma:

.srtbl-qt,caption  {
    text-align: left;
}

Do note that comma in CSS selector is used to separate multiple selectors that have the same styles

Upvotes: 1

DadaArno
DadaArno

Reputation: 200

.srtbl-qt, caption {
    text-align: left;
}

Take less lines, and give the same results. So I think it's the most efficient way.

Upvotes: 0

Pinx0
Pinx0

Reputation: 1258

You can concatenate several selectors with a comma:

.srtbl-qt, caption 
{
    text-align: left;
}

Upvotes: 1

Wawy
Wawy

Reputation: 6269

Like this?

.srtbl-qt,
caption  {
    text-align: left;
}

Upvotes: 1

Related Questions