I'm learning CSS and have a question regarding the * selector. I understood that it applies its styles on every single element within the document.
However, when I define a different style (background-color) for body and still another for paragraph, the style within the * selector is only applied to the body and not to the paragraph. See https://jsfiddle.net/oz8a1rn4/1/
* {
background-color: grey;
}
body {
background-color: blue;
}
p {
background-color: red;
}
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero soluta enim aut! Nihil nam obcaecati, fugiat sint sit libero voluptate eos incidunt odio neque cum, dignissimos aperiam, magnam nisi debitis.</p>
From what I understand, correct me if I am wrong, this is happening due to the effects of the css cascade.
See intro to the css cascade.
The * (universal) selector has no effect on css specificity.
The body and p have the same value of specificity (value 1).
Therefore, the next step in the cascade to decide which styles are chosen is source order. Later rules will win over the earlier rules, therefore, the background styling will be red.
What happens here is that the style background-color:grey is applied for the HTML element like this:
html {
background-color: grey;
}
body {
background-color: blue;
}
p {
background-color: red;
}
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero soluta enim aut! Nihil nam obcaecati, fugiat sint sit libero voluptate eos incidunt odio neque cum, dignissimos aperiam, magnam nisi debitis.</p>
This overlaps the blue style of the body which can be explained with the following snippet:
* {
background-color: grey;
}
html {
background-color: initial;
}
body {
background-color: blue;
}
p {
background-color: red;
}
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero soluta enim aut! Nihil nam obcaecati, fugiat sint sit libero voluptate eos incidunt odio neque cum, dignissimos aperiam, magnam nisi debitis.</p>
In the second snippet we reset the color change of the html element to initial value. This then shows the blue background color of body and thus is evidence that blue color of the body is just masked by the html element.
Here is also a screenshot (chrome devtools using your example) that proofs that the blue color was applied to the body element, but just masked by the html element:
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>
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;
}
on my website (using zenphoto and boostrap 3), I have an issue on my div.main class.
http://test.vincentbourganel.fr
I have static navbar and a fixed footer on the bottom.
I want the div.main have "a height of 100% of the rest of the remaing place".
It doesn't work when my content don't take all the remaing height.
See this page as example :
http://test.vincentbourganel.fr/page/contact/
Can you help me to slove this issue
Not sure how you feel about this solution and I'm more a back end developer than front end guy but you could always do something like
calc(100vh - (HEIGHT_OF_HEADER + BORDER) - (HEIGHT_OF_FOOTER + BORDER)
Only thing I don't like about this solution is I can't think of a way to do it without hard coding the heights in there. I'm sure there's a way to grab it but for now this should get you going in the right direction.
You can get it by using flex, I created a box class and assigned flex as a property, then use flex:1 0 0 to content part, I used position to footer to stay in bottam, and assigned overflow:auto to content part div.
below i posted a working example to understanding
Flex - Flex Guide
Working Fiddle
body {
margin: 0px;
padding: 0px;
}
.box {
display: flex;
flex-direction: column;
width: 100%;
min-height: 100vh;
}
.header {
background: tomato;
}
.content {
flex: 1 0 0;
background: green;
overflow: auto;
}
.footer {
background: blue;
position: relative;
}
<div class="box">
<div class="header">
Header
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi magnam iusto fugit illo omnis aperiam mollitia non fugiat, at in ratione harum ullam alias dicta, excepturi quod sed delectus veniam?<br><br> Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Nisi magnam iusto fugit illo omnis aperiam mollitia non fugiat, at in ratione harum ullam alias dicta, excepturi quod sed delectus veniam?<br><br> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi magnam iusto fugit illo omnis aperiam
mollitia non fugiat, at in ratione harum ullam alias dicta, excepturi quod sed delectus veniam?<br><br> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi magnam iusto fugit illo omnis aperiam mollitia non fugiat, at in ratione harum ullam
alias dicta, excepturi quod sed delectus veniam?<br><br>
</div>
<div class="footer">
Footer
</div>
</div>
you can use following code to adjust the height of main div. It will display on full screen if the content is less.
.main{
min-height: 100vh;
}
I found a way to do what I want in my js file.
My JS code fix min-height of my main div to fill the screen even if main content is small one.
this code is working fine to suit my need :
jQuery(document).ready(function() {
// full height for main div (windows height - "header" height - "footer" height)
$(window).resize(function() {
$('#main').css('min-height', $(window).height() - $('#menu').outerHeight() - $('#footer').outerHeight());
}).resize();
});
You can see it in action there :
http://test.vincentbourganel.fr/
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!
Let's say I have this html:
<p class="test">foo</p>
<p class="test">bar</p>
Is there a way I can make it only select the first line. So the css would be something along the lines of
.test:(text="foo") {
}
but only using css?
Edit: Sadly it cannot be done with pure css.
thanks anyways
If you have multiple elements:
<p class="test">foo</p>
<p class="test">bar</p>
<p class="test">zed</p>
and want to select the first one, then you can use :first-child selector:
.test:first-child {
color: red;
}
You can check the jsFiddle demo.
If you have one element:
<p class="test">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, quis, expedita, illo adipisci voluptates minus labore ex quos aspernatur impedit rerum nam! Officiis quas nam fugiat illum maiores repellat voluptas. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, quis, expedita, illo adipisci voluptates minus labore ex quos aspernatur impedit rerum nam! Officiis quas nam fugiat illum maiores repellat voluptas. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, quis, expedita, illo adipisci voluptates minus labore ex quos aspernatur impedit rerum nam! Officiis quas nam fugiat illum maiores repellat voluptas.</p>
and want to select the first line, then you can use :first-line selector:
.test:first-line {
color: red;
}
You can check the jsFiddle demo.
If you want to select your element, based on the content within it, it not possible by CSS, you must javascript for it, for example jQuery has one implementation:
<div>John Resig</div>
<div>George Martin</div>
<div>Malcom John Sinclair</div>
<div>J. Ohn</div>
<script>
$("div:contains('John')").css("text-decoration", "underline");
</script>
:contains() Selector - jQuery API Documentation
*EDIT: Question-asker doesn't want first-child, and instead wants it to be based on a string, which you cannot do with pure CSS. The following answer is for first-child implementation *
This answer is for first-child:
If it's only ever going to be the first one you need the :first-child pseudo-element.
There is also last-child and nth child, but :First-child is the one that's safe to use in IE8 and earlier, but you have to have a doctype:
http://www.w3schools.com/cssref/sel_firstchild.asp
http://quirksmode.org/css/selectors/firstchild.html
What you'd need to do is something like this:
p:first-child {
/* CSS Styles */
}
Here is a fiddle with it working:
http://jsfiddle.net/shayl/KwWjt/