This question already has answers here:
Specificity of inherited CSS properties
(4 answers)
Closed 2 years ago.
Apologies if this has been asked, but I can't figure out why this is happening! The text is appearing as black, even though I've set it up in the body selector as red. I appreciate the help.
(Note: The same thing happens with the div selector)
css:
* {
color: black;
}
body {
font-family: "Courier New", Courier, monospace;
line-height: 1.5em;
color: red;
}
HTML:
<body>
<h2>Hi!</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus,
reprehenderit expedita, non eveniet qui eos nostrum, tenetur odit
perferendis praesentium voluptatem nobis rerum laborum. Nobis consequuntur
reprehenderit id nesciunt exercitationem!
</p>
</body>
The body doesn't contain any text directly. That is why you can't see the red text. While * applies to all the selectors, hence you can only see the black color.
Look at the following code, it will make more sense to you.
*{
color: black;
}
body {
color: green;
}
p {
color: red;
}
<body>
Body text
<h2>Hi!</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus,
reprehenderit expedita, non eveniet qui eos nostrum, tenetur odit
perferendis praesentium voluptatem nobis rerum laborum. Nobis consequuntur
reprehenderit id nesciunt exercitationem!
</p>
</body>
You want to target the paragraph and the heading (p/h2)
The * applies to all selectors but CSS is cascading as the name explains which means that any style you give to a div below the first rule, will override whatever you have on the *
Give them a class attribute
HTML
<body>
<h2 class="heading">Hi!</h2>
<p class="paragraph">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus,
reprehenderit expedita, non eveniet qui eos nostrum, tenetur odit
perferendis praesentium voluptatem nobis rerum laborum. Nobis consequuntur
reprehenderit id nesciunt exercitationem!
</p>
</body>
CSS
* {
color: black;
}
.heading, .paragraph {
font-family: "Courier New", Courier, monospace;
line-height: 1.5em;
color: red;
}
Related
I am using bootstrap V4 and need for a customized paragraph a line-height of 1.
But I am not able to overright the bootstrap setting of ~1.5.
<p class="ptime"><f:format.date format="H:i:s">{play.plDate}</f:format.date></p>
<p class='dur'>{play.Duration}</p>
p.ptime {
line-height:normal !important;
}
p.dur {
font-size: 80%;
text-align: right;
vertical-align: text-bottom;
padding: 0px;
margin: 0px;
line-height:normal !important;
}
I tried also 1, 1em for the line-height, but I am not able to reduce the space between the paragraphs (lines).
What I have to do?
In default, bootstrap adds a 16px margin at the bottom for every paragraph. So if you need to remove the space between those two paragraphs, you have to remove that bottom margin instead of reducing line-height using css.
From all the paragraphs,
p {
margin-bottom: 0 !important;
}
From only those two paragraphs (ptime & dur in your case)
.ptime, .dur {
margin-bottom: 0 !important;
}
See below working example. I used bootstrap 4.6.0.
p {
margin-bottom: 0 !important;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<p class="ptime">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Facilis, ullam inventore! Officiis, quam facilis iste unde sapiente doloribus ad fugit quaerat nam natus, vero, ab totam! Provident perferendis nemo excepturi?
</p>
<p class='dur'>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. At asperiores quas adipisci voluptas fuga dolore explicabo dolor labore delectus a incidunt dolorem accusamus beatae eveniet, quae, impedit excepturi ut sequi.
</p>
I have this css and its working fine the text appears at right and is aligned.
However the same code of that fiddle in a pdf, the text is apeparing like this (like the example at right, at left is how it should display):
Do you know what can be the issue?
.container {
display: flex;
}
.span {
margin-right: 5px;
}
<div class="container">
<span class="span">1.</span>
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint vel aut quidem consequatur quaerat optio ab! Iste fugit nostrum odio dolorum sequi, odit ratione omnis, atque sunt perferendis commodi, iure.</span>
</div>
You can solve this problem by using text-align
.container {
display: flex;
text-align: justify;
text-justify: inter-word;
}
.span {
margin-right: 5px;
}
<div class="container">
<span class="span">1.</span>
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint vel aut quidem consequatur quaerat optio ab! Iste fugit nostrum odio dolorum sequi, odit ratione omnis, atque sunt perferendis commodi, iure.</span>
</div>
#mehran text-justify:inter-word; is not a valid CSS property
I'm trying to find a CSS selector for an element that is the first child, taking any text nodes into account that might come before it (i.e. if any elements come before, possibly unwrapped text nodes, this is no longer considered the first child).
But it seems :first-child does not include text nodes, neither does :nth-child, etc.
This is where I'm at, but it's not working:
.red-if-not-first {
color: red;
font-weight: bold;
}
.red-if-not-first:first-child {
color: green;
}
<p>
Lorem ipsum. <span class="red-if-not-first">This should be red, not green, because some content comes before it.</span> Eum natus culpa officia a molestias, sed beatae aut in autem architecto iure repellat quam placeat, expedita maxime laborum necessitatibus repudiandae. Corrupti!
</p>
<p>
<span class="red-if-not-first">This is rightly green, not red, because it's first bit of content in this paragraph.</span> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum natus culpa officia a molestias, sed beatae aut in autem architecto iure repellat quam placeat, expedita maxime laborum necessitatibus repudiandae. Corrupti!
</p>
Unfortunately I have little control over the markup.
I'm aware this has been asked before, but that was 3 years ago, which is as good as a thousand years in front-end!
If, for some strange reason, you can make do with only supporting Gecko, you can use-moz-first-node selector to do this.
https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-first-node
One workaround could be to make use of the :empty pseudo class. You will need more markup though.
p .red-if-not-first {
color: red;
font-weight: bold;
}
p > :empty + .red-if-not-first {
color: green;
}
<p>
<span>Lorem ipsum.</span> <span class="red-if-not-first">This should be red, not green, because some content comes before it.</span> Eum natus culpa officia a molestias, sed beatae aut in autem architecto iure repellat quam placeat, expedita maxime laborum necessitatibus repudiandae. Corrupti!
</p>
<p>
<span></span> <span class="red-if-not-first">This is rightly green, not red, because it's first bit of content in this paragraph.</span> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum natus culpa officia a molestias, sed beatae aut in autem architecto iure repellat quam placeat, expedita maxime laborum necessitatibus repudiandae. Corrupti!
</p>
In essence, you're asking if text can affect the styling of dom elements and the answer is - no, because text is not a dom element of it's own.
We can prove this with a simple experiment. Just add a marker element at the beginning of the paragraph and then use a sibling selector to override color. You'll see that this works in both cases, because text has no effect on surrounding dom flow.
For the record, I thought I was onto something by initially doing this marker experiment with ::before pseudo elements but they can't be used with sibling selectors either. Pseudo elements are not real elements and will have no effect on the relationships of actual dom tree.
.red-if-not-first {
color: red;
font-weight: bold;
}
.red-if-not-first:first-child {
color: green;
}
.marker + span{
color: red;
}
<p>
<i class="marker"></i>
Lorem ipsum. <span class="red-if-not-first">This should be red, not green, because some content comes before it.</span> Eum natus culpa officia a molestias, sed beatae aut in autem architecto iure repellat quam placeat, expedita maxime laborum necessitatibus repudiandae. Corrupti!
</p>
<p>
<i class="marker"></i>
<span class="red-if-not-first">This is rightly green, not red, because it's first bit of content in this paragraph.</span> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum natus culpa officia a molestias, sed beatae aut in autem architecto iure repellat quam placeat, expedita maxime laborum necessitatibus repudiandae. Corrupti!
</p>
This is 2017. The answer is "No". There is no such CSS selector that can help you with this.
I have many sections on my page. Every of these sections can have similar elements, for example in each of these sections can be h1 element.
I want to add css files where every of these css will be for only one section.
For example I have three sections on my page where ids are:
section1 -- section2 -- section3
I have three css files too with names:
section1.css -- section2.css -- section3.css
How to do that every css file refers to a suitable section?
Maybe can I add any additional block to every of these css files with section id?
I don't know why you want to do that, but if you want to have separate styles for each section which has unique ID just use the ID as a selector. For example:
section1.css
#section1 h1{ color:red;}
#section1 .someclass { color: blue}
section2.css
#section2 h1 { color: green;}
#section2 .someclass {color:yellow;}
And so on. You will have separate styles for each section selecting them by ID. I think it's the easiest way
CSS files doesn't refer to its elements (in your case id). Its the selector which actually targets elements. You can use separate for each of the children on each section.
Instead use inheritance with each id.
Have a look at the example snippet below:
/* Section 1 */
#section1 {
background: #ff0;
padding: 10px 15px;
}
#section1 p {
background: #99d;
}
/* Section 2 */
#section2 {
background: #99d;
padding: 10px 15px;
}
#section2 p {
background: #ae9;
}
/* Section 3 */
#section3 {
background: #ae9;
padding: 10px 15px;
}
#section3 p {
background: #ff0;
}
body {
margin: 0;
}
<div id="section1">
<strong>Section 1</strong>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas quam dicta libero qui sapiente beatae sunt, aspernatur et reprehenderit natus dolor, sint aliquid iure magni quibusdam accusantium provident perspiciatis fugit.</p>
</div>
<div id="section2">
<strong>Section 2</strong>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas quam dicta libero qui sapiente beatae sunt, aspernatur et reprehenderit natus dolor, sint aliquid iure magni quibusdam accusantium provident perspiciatis fugit.</p>
</div>
<div id="section3">
<strong>Section 3</strong>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas quam dicta libero qui sapiente beatae sunt, aspernatur et reprehenderit natus dolor, sint aliquid iure magni quibusdam accusantium provident perspiciatis fugit.</p>
</div>
Hope this helps!
I have in text paragraphs some rather large portions of underlined texts. Many of them go over several lines.
Within those underlined elements, in some cases I have elements that should be underlined themselfes. Here, the underline of the outer underlined element should go a little down in order to make the underline of the inner underlined elments visible. Look at the third line of my mockup and you will understand what I mean (at least I hope so). "querit" and "Epicurae" are underlined within underlined elements.
How can I achieve this in CSS? With text-decoration: underline the underlines collapse and you won't see which elements are nested underlined elements. On the other hand, display:inline-block; border-bottom:1px solid black; will just underline the last line.
Edit: The HTML for this mockup would look like this: (not particulary interesting, I guess)
<p> de con firt omniandabetisporatienimusi remprobist extrum etis e ipsaenderienimagnos <span class="underlined">quibus quidas mus, ines, quam Solostracum met ipsa horum mum, esispotatus con ipid inprobus, que vollin que <span class="underlined">querit</span> pus nego mo <span class="underlined">Epicurae</span> id sitam mod etia et nectuas ent malosse te. quitus, essendolinxet ob utrus aleganesserisimone ne nitae lium vitae; Metisquiamquae sid los plego ilius, andus adexperibus vitur. quod dictantum alt, num Toriae</span> conc ocorturaec </p>
Just don't use display: inline-block. Say, we are using the tag <span class="und"> for underlining something. For a nested one, use something like this:
/* Start Praveen's Reset for Fiddle ;) */
* {font-family: 'Segoe UI'; margin: 0; padding: 0; list-style: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
body {margin: 15px;}
/* End Praveen's Reset for Fiddle ;) */
p {margin: 0 0 10px;}
.und {border-bottom: 1px solid; padding: 2px;}
.und .und {border-bottom: 1px solid; padding: 0;}
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime, cumque! Facere iste, adipisci non quam molestias modi! Reprehenderit, quo officia est voluptatibus eum omnis magni voluptate. Similique, voluptatibus quasi dolore!</p>
<p><span class="und">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque quo ea natus deserunt praesentium laudantium similique, officia sequi unde provident quasi aliquid iure, tempora sunt quod doloremque, dolor. Voluptate, tempora! <span class="und">This is double underlined and doesn't break!</span> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor commodi adipisci similique eligendi a praesentium officia repudiandae quaerat ipsum placeat natus nemo, sit magnam laborum error vero, ullam officiis veniam!</span></p>
Nested Items
/* Start Praveen's Reset for Fiddle ;) */
* {font-family: 'Segoe UI'; margin: 0; padding: 0; list-style: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
body {margin: 15px;}
/* End Praveen's Reset for Fiddle ;) */
p {margin: 0 0 10px; line-height: 1.5;}
.und {border-bottom: 1px solid; padding: 4px;}
.und .und {border-bottom: 1px solid; padding: 2px;}
.und .und .und {border-bottom: 1px solid; padding: 0;}
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime, cumque! Facere iste, adipisci non quam molestias modi! Reprehenderit, quo officia est voluptatibus eum omnis magni voluptate. Similique, voluptatibus quasi dolore!</p>
<p><span class="und">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque quo ea natus deserunt praesentium laudantium similique, officia sequi unde provident quasi aliquid iure, tempora sunt quod doloremque, dolor. Voluptate, tempora! <span class="und">This is double underlined and <span class="und">triple consectetur adipisicing</span> doesn't break!</span> Lorem ipsum dolor sit amet, elit. Dolor commodi adipisci similique eligendi a praesentium officia repudiandae quaerat ipsum placeat natus nemo, sit magnam laborum error vero, ullam officiis veniam!</span></p>