My style-sheet looks like this:
.caption {
max-width: 100%;
padding: 5px;
}
.caption-text {
font-size: 0.8em;
font-style: italic;
text-align: center;
}
.caption .caption-text {
margin: 0.8075em 0.5em;
line-height: 1.4;
I want to select two classes:
".caption-text" and ".caption .caption-text"
How do I write the HTML to select the (third) class ".caption .caption-text" without it selecting the (first two) classes ".caption" AND ".caption-text"?
The original HTML I had was:
<p id="caption-attachment-1711" class="caption-text">...</p>
So it doesn't refer to ".caption .caption-text" but that's selected using a unique id created by CMS. I need to write the HTML without using id!
If you want an additional style when both classes are put together, don't use a space between it:
.caption.caption-text {
margin: 0.8075em 0.5em;
line-height: 1.4;
}
But it's important to highlight that an HTML element with the both classes applied (i.e. <p class="caption caption-text">...</p>) will match the individual classes too. So, all styles of .caption, .caption-text and .caption.caption-text will be applied.
So, lets be clear: It's the way multiple classes are applied to HTML elements. There's nothing you can do at the HTML side to avoid it.
So, if you really don't want the styles of .caption and .caption-text applied, the most obvious and clean approach is to create a third class not related with the first ones, applying just it:
.third-class {
margin: 0.8075em 0.5em;
line-height: 1.4;
}
<p class="third-class">...</p>
But if you're fanatic about your actual class names, it's possible to do some tricks with :not pseudo-class to avoid styles of the first class if the second is present, and vice versa:
.caption:not(.caption-text) {
max-width: 100%;
padding: 5px;
}
.caption-text:not(.caption) {
font-size: 0.8em;
font-style: italic;
text-align: center;
}
.caption.caption-text {
margin: 0.8075em 0.5em;
line-height: 1.4;
}
This way, you can have three different behaviors:
Apply only .caption, the element will have max-width: 100% and the padding: 5px styles.
Apply only .caption-text, the element will have font-size: 0.8em, font-style: italic and text-align: center styles.
Apply .caption and .caption-text together, the element will have margin: 0.8075em 0.5em and line-height: 1.4 but not the other styles.
But I personally think that a third class not related with the first two ones is by far the best option. Much more readable, clean and maintenable.
If you want to keep the name of third class as .Caption and .Caption-text and these does not affect the other two classes above it, then you can apply this:
Change the name of the third class which is .caption .caption-text to
<p class="new caption caption-text><p>
Css for third class:
.new {
margin: 0.8075em 0.5em;
line-height: 1.4;
}
Also, if you want to select two classes at the same time, please use .caption, .caption-text in css as:
.caption, .caption-text {
margin: 0.8075em 0.5em;
line-height: 1.4;
}
If you want something else, please let me know.
Related
I created a class:
how to I format a p tag within this class with a different font size?
I tried an inline method but I am guessing I can do this globally
.cities {
font-family: Verdana;
font-size: 20px;
background-color:lightyellow;
padding: 10px;
margin: 10px;
}
If you have a p tag inside a tag contains the class cities
you can do:
.cities p{
font-family: verdana;
font-size: 20px;
background-color:lightyellow;
padding: 10px;
margin: 10px;
}
Add another class to the relevant HTML tag and combine the two classes in a CSS rule just for the font-size:
.cities.smaller {
font-size: 12px;
}
The relevant p tag would like like this in HTML:
<p class="cities smaller">...</p>
The combination of two classes will "overrule" the single class due to a higher CSS specifity. Here an example in a snippet:
.cities {
font-family: Verdana;
font-size: 20px;
background-color:lightyellow;
padding: 10px;
margin: 10px;
}
.cities.smaller {
font-size: 12px;
}
<p class="cities">This is an element that has only the "cities" class applied to it</p>
<p class="cities smaller"> This will have a smaller font-size, but otherwise look the same as elements which have the "cities" class</p>
Also note that in this example the .smaller class will only be effective in combination with the .cities class, since in CSS it only appears in a combined selector. If you want to use it also in combination with other classes (or alone), you can create a single-selector class like .smaller { font-size: 12px; } instead.
I know you can use the display: property to display an inline-element as a block-element, and also other like table-cell etc. However, is there a way to make an element display like any other element? Something like
div.header{ display: h2; }
would be useful. Any way to accomplish this in css, except for overriding all the h2 properties?
If h2 has the following styles:
h2 {
line-height: 24px;
color: rgb(255,0,0);
font-size: 16px;
font-weight: bold;
}
and you want div.header to look the same...
You can state this in your css:
h2, div.header {
line-height: 24px;
color: rgb(255,0,0);
font-size: 16px;
font-weight: bold;
}
This is more of a debate than a question but I feel that there isn't a lot on the internet that covers this topic.
For example foundation comes with hundreds of !important tags for things that in my eyes do not need them:
.text-center { text-align: center !important; }
There is loads of css that is simular to this which in my point of view is bad practise and the question I'd like to answer is why do css frameworks use them at all? Bootstrap and Foundation are two main css frameworks that both use them.
I've always been told that using important tags in css is very bad practise and should only be used for IE.
If you write your own CSS you have the freedom to add more specific rules whenever needed:
.center { text-align: center; }
.foobar { text-align: left; }
.foobar.center { text-align: center; }
However, the CSS framework cannot predict how you will arrange your HTML. So it is easier to do !important instead of generating thousands of combinations of more specific rules. Example:
.center { text-align: center; }
.foobar { text-align: left; }
.barbaz { text-align: right; }
/*
* assuming .center must be centered regardless of other rules and
* !important must be avoided at the same time, we need to do this
*/
.foobar.center { text-align: center; }
.barbaz.center { text-align: center; }
.foobar.barbaz.center { text-align: center; }
Is because you can have in your code st. like this:
<style>
#aside p {text-align: right;}
.text-center {text-align: center} /* without important text will be aligned to right */
</style>
<div id="aside">
<p>right-aligned text</p>
<p class="text-center">centered text</p>
</div>
http://jsfiddle.net/v1v4jaas/
In this case without inportant the text will be aligned to right. With important, the second paragraph will be centered.
Class has only a low priority against id, etc.
Using !important in your CSS usually means, the classes you have written do
not have a proper hierarchy.
The !important rule overrides a particular property. But should be used only when one is helpless and it has to be overridden.
Best practice would be to use !important only in utility classes alone.
eg. Say you have a button which u want to look similar throughout your application
.btn {
margin-bottom: 0;
text-align: center;
vertical-align: middle;
touch-action: manipulation;
cursor: pointer;
border: 1px solid transparent;
padding: 6px 12px;
font-size: 11px;
border-radius: 4px;
}
The above definition for .btn holds true unless it is not wrapped by any other class which could override the .btn formatting which we expect to be same throughout the application. But once it is wrapped by other class like below, the final style would be totally different from your expectations.
<p class="format-paragraph">
<button type="submit" name="save" class="btn"> Submit</button>
</p>
Now, to make your .btn class super strong and to be treated with respect by the ones wrapping it, change the .btn definition to:
.btn {
margin-bottom: 0 !important;
text-align: center !important;
vertical-align: middle !important;
touch-action: manipulation !important;
cursor: pointer !important;
border: 1px solid transparent !important;
padding: 6px 12px !important;
font-size: 11px !important;
border-radius: 4px !important;
}
This definition would be sufficient to make your button look similar throughout the application.
The .text-center { text-align: center !important; } class mentioned in question is nothing but a utility here.
Know more on !important precedence here.
I'm trying to make a box with a header, a first paragraph, and a second paragraph. How can I select only the last paragraph in CSS so I can move it down, so it isn't overlapping the first paragraph? This is the code I have:
#info-box > p {
line-height: 1.3em;
font-size: 17px;
font-family: Arial;
text-align: center;
color: #979797;
margin-left: 20px;
margin-right: 20px;
margin-top: 0px;
position: absolute;
}
#info-box:nth-child(2) {
line-height: 1.3em;
font-size: 17px;
font-family: Arial;
text-align: center;
color: #979797;
margin-left: 20px;
margin-right: 20px;
margin-top: 100px;
position: absolute;
}
You're looking for :last-child
Quoting the specification:
The :last-child pseudo-class represents an element that is the last child of some other element.
Here's an example:
div {
width:100px;
height:100px;
background-color:red;
border:solid;
margin:2px;
display:inline-block;
border-width:1px;
}
div:last-child{
background-color:white;
}
Although to be fair, absolute position is rarely "the way" like Nit implied in the comments. Fixed sizes in pixel don't work too well on different screen sizes and different zooms, prefer a more logical layout. See this question on why.
CSS for last element try to use :last-child
#info-box:last-child {
}
Check here for reference CSS selector
http://www.w3schools.com/cssref/css_selectors.asp
I have paragraphs with inline header spans that I'm trying to set to a grid. To make sure that multi-line headers are properly spaced, I'm using line-height; however, this results in too much space between the first and second lines of the paragraph. Also, multi-line headers seem not to be inlined. (Actual desired line-height of headers is 33px, but I made it 44px to accentuate the space between the first and second paragraph lines).
Please see http://jsfiddle.net/NbTvu/4/ and http://i.imgur.com/qkffaWl.png
CSS:
p {
font-size: 14px;
line-height: 22px;
margin-top: 22px;
}
span.h1 {
font-size: 24px;
line-height: 44px;
font-weight: 600;
display: inline-block;
margin-top: 22px;
}
HTML:
<p>
<span class=h1>DISCONTINUING PPIs</span>
— Rebound acid-hypersecretion is an important consideration following abrupt cessation of prolonged treatment with PPIs. As a result, treatment should be tapered following prolonged or higher dose treatment with a PPI.
</p>
Thanks in advance!
Your font-size is too big for the thing you want to achieve.
Look at this: if I remove the font-size and line-height, it works perfectly:
http://jsfiddle.net/NbTvu/1/
span.h1 {
font-weight: 600;
display: inline-block;
margin-top: 22px;
}
Try to style from here.
And using span class="h1" is very very bad. Use a regular h1 or give your span a better classname.
Or you can play a little with margins:
p {
font-size: 14px;
line-height: 22px;
margin-top: 20px;
padding:0;
}
span.h1 {
font-size: 24px;
font-weight: 600;
display: inline-block;
margin-top: 21px;
}
and remove line-height... http://jsfiddle.net/NbTvu/2/