This question already has answers here:
What does a space mean in a CSS selector? i.e. What is the difference between .classA.classB and .classA .classB? [duplicate]
(3 answers)
Closed 2 years ago.
I start to run out of ideas. I'm using flexbox inside flexboxes, and somehow even tho somewhere else on my page I use it, here I'm not able to reach "h1 .class" or "p .class".
My HTML:
<div class="corediv">
<div class="coreimg">
<i class="fas fa-hand-holding-usd"></i>
</div>
<div class="coretext">
<h1>TEXTTEXTEXT</h1>
<p>TEXTTEXTEXT</p>
</div>
</div>
I want to select those particularly because I want to have no space between header and paragraph. Thus I tried to put margins to 0.
With following CSS:
h1 .coretext {
margin-botton: 0px;
}
p .coretext {
margin-top: 0px;
}
And so to ensure it wasn't managing to affect h1 and p, I also added some "color: red" and "font-size: x-large;".
But nothing seems to be able to reach thoses h1 and p.
Obviously, when I directly calls h1 or p with:
h1 {
color: red;
}
It works.
Any insight on this? I've been trying quite everything I found online and since english isn't my native langage, I might have been taping the wrong keyword somehow, because I hardly believe I'm the first one to encounter this.
Thank you in advance for your time :)!
A couple of issues with your current code. First of all this selector h1 .coretext will target any children of a <h1> element with the class of coretext.
There was also a typo contained in your code margin-botton - I'm not going to insult your intelligence, I'm assuming this was just a mistyped character, but it will have been causing you issues.
To target elements that are inside the element with the classcoretext you can use the following selectors:
.coretext h1 {
margin-bottom: 0px;
}
.coretext p {
margin-top: 0px;
}
<div class="corediv">
<div class="coreimg">
<i class="fas fa-hand-holding-usd"></i>
</div>
<div class="coretext">
<h1>TEXTTEXTEXT</h1>
<p>TEXTTEXTEXT</p>
</div>
</div>
Related
This question already has answers here:
CSS Dot Notation Naming Convention
(6 answers)
Closed 2 years ago.
I have learned HTML and CSS a year ago and this year i wanted to learn JS. I am revisiting my old HTML projects and i am trying to refresh my HTML and CSS by making a new one. I tried to start simple and write some text in HTML and than make it look better with CSS. So i typed my text in HTML and tried changing it with CSS. But no matter what i do, if it is in an external .css file or in a <style> attribute, the HTML doesn't change.
This is my HTML code:
<body>
<div class="higher-or-lower">
<h1 class="first-title">Higher or lower?</h1>
<h2>Choose between higher and lower</h2>
<p>Is the number higher or lower then the previous</p>
</div>
<style>
higher-or-lower {
margin-left: 200px;
}
first-title {
color: #ff00ff;
}
</style>
</body>
</html>
You are just missing the periods that represent a class name in CSS. see below:
.higher-or-lower {
margin-left: 200px;
}
.first-title {
color: #ff00ff;
}
<div class="higher-or-lower">
<h1 class="first-title">Higher or lower?</h1>
<h2>Choose between higher and lower</h2>
<p>Is the number higher or lower then the previous</p>
</div>
This question already has answers here:
Using two CSS classes on one element
(9 answers)
Closed 4 months ago.
Can I apply 2 classes to a single div or span or any HTML element? For example:
<a class="c1" class="c2">aa</a>
I tried and in my case c2 does not get applied. How can I apply both classes at once?
1) Use multiple classes inside the class attribute, separated by whitespace (ref):
<a class="c1 c2">aa</a>
2) To target elements that contain all of the specified classes, use this CSS selector (no space) (ref):
.c1.c2 {
}
Include both class strings in a single class attribute value, with a space in between.
<a class="c1 c2" > aa </a>
As others have pointed out, you simply delimit them with a space.
However, knowing how the selectors work is also useful.
Consider this piece of HTML...
<div class="a"></div>
<div class="b"></div>
<div class="a b"></div>
Using .a { ... } as a selector will select the first and third. However, if you want to select one which has both a and b, you can use the selector .a.b { ... }. Note that this won't work in IE6, it will simply select .b (the last one).
<a class="c1 c2">aa</a>
This is very clear that to add two classes in single div, first you have to generate the classes and then combine them. This process is used to make changes and reduce the no. of classes. Those who make the website from scratch mostly used this type of methods. they make two classes first class is for color and second class is for setting width, height, font-style, etc.
When we combine both the classes then the first class and second class both are in
effect.
.color
{background-color:#21B286;}
.box
{
width:"100%";
height:"100px";
font-size: 16px;
text-align:center;
line-height:1.19em;
}
.box.color
{
width:"100%";
height:"100px";
font-size:16px;
color:#000000;
text-align:center;
}
<div class="box color">orderlist</div>
Separate 'em with a space.
<div class="c1 c2"></div>
.color
{background-color:#21B286;}
.box
{
width:"100%";
height:"100px";
font-size: 16px;
text-align:center;
line-height:1.19em;
}
.box.color
{
width:"100%";
height:"100px";
font-size:16px;
color:#000000;
text-align:center;
}
<div class="box color">orderlist</div>
In practice, two classes are used for an element when the two classes format different non-overlapping areas, e.g., one class specifies the color and the other the alignment of text. Then you use these two classes for an element and don't need to write a third class that is the amalgam of the other two, see my source code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Example</title>
<style>
.color-red {color: red; }
.center-align-text {text-align: center;}
</style>
</head>
<body style="width:500px; background-color:lightgray">
<p style="width:400px;background-color:white"
class="color-red center-align-text">Centered pepperoni</p>
</body>
</html>
So I've been coding for a week and I have googled for 30 min trying to find a solution. So excuse me if it's already been asked. I'm trying to write a summary of what I've learned after each lesson but it's not working!
<body> <center> h1> Module 40 </h1> </center>
<p>In this module I have learned on how to use the tag <!-- <div> ---> the purpose of this tag is to create a specific group whether it is images, headers, paragraphs, etc, which you can attribute seperate properties to so it is unaffected by tag selectors. by adding a class or ID to it. </p> <br>
<div class="p1">
<p> Like for example this paragraph is inside a div called "p1". And I have added a specific font-size for this one compared to the previous paragraph which is affected by a <strong> tag </strong> selector instead of a <strong> class </strong> selector.
</p>
</div>
</body>
And my CSS is this:
p
{
font-size: 15px;
}
/*****class selector*****/
.p1
{
font-size: 20px;
}
Shouldn't the class selector override the tag selector? Font size 15px is being applied to the whole text. It works if I add class="p1" to the second paragraph. But shouldn't this work if I add it to the div? Isn't that the purpose of having a div?
Must be .p1 p
p
{
font-size: 15px;
}
/*****class selector*****/
.p1 p
{
font-size: 20px;
}
<p>In this module I have learned on how to use the tag <!-- <div> ---> the purpose of this tag is to create a specific group whether it is images, headers, paragraphs, etc, which you can attribute seperate properties to so it is unaffected by tag selectors. by adding a class or ID to it. </p> <br>
<div class="p1">
<p> Like for example this paragraph is inside a div called "p1". And I have added a specific font-size for this one compared to the previous paragraph which is affected by a <strong> tag </strong> selector instead of a <strong> class </strong> selector.
</p>
</div>
This happens because of Specificity. Specificity is the means by which browsers decide which CSS property values are the most relevant to an element and, therefore, will be applied. Specificity is based on the matching rules which are composed of different sorts of CSS selectors.
You can find one of the most useful documentations here -
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
No because your paragraph is a child of .p1
All children inherit the styling of their parent (font-size:20px), but have the ability to override this (which you did by setting the paragraph styling to font-size: 15px)
You can read more about inheritance in CSS here:
https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance
Your <p> tag is child of <div> tag, that's why its not working. Try adding the class to <p> tag
This question already has answers here:
Should ol/ul be inside <p> or outside?
(4 answers)
Closed 6 years ago.
I'm revising for my exam, going over answering some past questions without the markscheme. I am confused on this:
For the following rule, explain the effect and which elements will be affected:
p ul li {
color:blue;
}
I wrote up some HTML on JSFiddle: http://jsfiddle.net/2nkmzgv2/
It's here anyway:
<p>
<ul>
<li>Should this be blue?</li>
</ul>
</p>
So nothing happens to the text. I would have thought it changes blue, but is nothing actually meant to happen and the purpose of the question was to throw you off or is my syntax/method wrong in the HTML content?
It's because ol/ul items aren't allowed inside of p elements.
Should ol/ul be inside <p> or outside?
Seems like a trick question for your exam then. Most likely you will want to brush up on the HTML spec since the question isn't truly based on CSS knowledge alone.
You are getting the described behavior because <p> cannot contain block-level elements such as <ul> or <ol>. The browser (e.g., Chrome) knows this is not possible and thus try to handle your illegal structure by placing your block element in between two paragraphs:
Because of this, the rule you have declared for that li does not apply.
p ul li {
color: blue;
}
<p>
Hello
<ul>
<li>I'm never blue.</li>
</ul>
Goodbye
</p>
Other trick questions could be:
a a { color:red }
p p { color:blue; }
The HTML is invalid since you cannot have list inside paragraph tags.
That means that the CSS will also never be applied to the li element. The correct CSS would be just:
ul li {
color: blue;
}
with this HTML:
<ul>
<li>Should this be blue?</li>
</ul>
Updated JSFiddle
"List elements (in particular, ol and ul elements) cannot be children of p elements. When a sentence contains a bulleted list." by HTML specification
This question already has answers here:
:first-child not working as expected
(5 answers)
CSS selector for first element with class
(23 answers)
Closed 5 years ago.
I'm wondering why the following CSS fiddle is not just turning off the up arrow on the first child and not any other DIVs.
<div id="activeitemslist" class="">
<div class="ind_item">
<div class="ind_updn">
<span class="fa fa-arrow-up"></span>
<span class="fa fa-arrow-down"></span>
</div>
</div>
<div class="ind_item">
<div class="ind_updn">
<span class="fa fa-arrow-up"></span>
<span class="fa fa-arrow-down"></span>
</div>
</div>
</div>
CSS
#activeitemslist{width:100%;border:1px solid red}
#activeitemslist DIV:first-child SPAN.fa-arrow-up {display:none !important }
.ind_item > DIV{display: inline-block;text-align: center;vertical-align: middle}
https://jsfiddle.net/vvc0a4gx/
Hi.
Where is the problem?
Let's try explain essential part of your CSS rule: #activeitemslist DIV:first-child.
It looks for a div which is first child of his parent and parent must be inside element with id="activeitemslist".
According to this both up arrows fit in your rule #activeitemslist DIV:first-child SPAN.fa-arrow-up {display:none !important } so both are not displayed.
Solution
To refer just to first child div of element with id="activeitemslist" CSS rule should looks like #activeitemslist > div:first-child.
So to not display first up arrow in exemplary fiddle use follow CSS rule (there is no need to use !important):
#activeitemslist > div:first-child span.fa-arrow-up {
display: none;
}
Updated code fiddle from the question with the solution.
Sources
You can read more about CSS3 selectors on e.g. W3Schools page.
Cheers
I changed the CSS here
#activeitemslist .ind_item:first-child SPAN.fa-arrow-up {display:none !important }