Style only paragraphs that are inside a div using CSS - html

So I am currently trying to edit the "line-height" of my Wordpress paragraphs. The problem is that I have multiple p tags on my page, and I'm only interested in changing the paragraphs that are located inside a div named "entry-content", which is actually the article of the page.
Here is the basic code of the php page I have:
<div class="entry-content">
<p style="text-align: center;">Paragraph 1</p>
<p style="text-align: center;">Paragraph 2</p>
<p>Paragraph 3</p>
</div>
So my question is if there's a way to do something like that in css (so it only affects the paragraphs that are inside the div entry-content:
.entry-content {
p, li {
line-height: 30px;
}
}
Thanks for your help

Your CSS selector needs to be:
div.entry-content p {
line-height: 30px;
}
This will style all <p> elements that are descendants of a <div> element with the class name "entry-content".

Related

Why is my class selector not overriding tag selector?

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

Using CSS to change a class background but only if it is not after a h4

I am trying to change the background colour of PARAGRAPH 4 only. I want to leave Paragraph 2 alone (because it is after a H4). I have tried the not selector but can't seem to get the logic working right. Not wanting to use JavaScript, PHP or jQuery. Only pure CSS please.
.widget-wrap > .widget-title {
background-color: yellow;
}
.widget-title + .textwidget {
background-color: red;
}
<div class="widget-wrap">
<h4 class="widget-title">Paragraph 1 in the div.</h4>
<p class="textwidget">Paragraph 2 in the div.</p>
<p>Paragraph 3 in the div.</p>
</div>
<div class="widget-wrap">
<p class="textwidget">PARAGRAPH 4 INSIDE 2ND DIV.</p>
<p>PARAGRAPH 5 INSIDE 2ND DIV.</p>
</div>
If the first child of .widget-wrap will only either be an h4.widget-title, or a p.textwidget (i.e. when the h4 is not present), simply use :first-child:
.widget-wrap > .widget-title {
background-color: yellow;
}
.widget-wrap > .textwidget:first-child {
background-color: red;
}
<div class="widget-wrap">
<h4 class="widget-title">Paragraph 1 in the div.</h4>
<p class="textwidget">Paragraph 2 in the div.</p>
<p>Paragraph 3 in the div.</p>
</div>
<div class="widget-wrap">
<p class="textwidget">PARAGRAPH 4 INSIDE 2ND DIV.</p>
<p>PARAGRAPH 5 INSIDE 2ND DIV.</p>
</div>
If there any other elements may appear before the first p.textwidget absent an h4.widget-title, that will complicate things slightly. You would use :not() with a sibling selector in that case, but if there can be a variable number of elements, you won't be able to do this reliably.
check this out
.widget-wrap:nth-child(2) .textwidget {
background-color: green;
color: white;
}
Why you being not using different class name or id for the paragraph 4. that will be more simple and crystal clear. I would rather suggest you to use.
In current code as class names are same for parent div and P hence the color is changing for all not only for h4. sl please kindly use these.
Html
<div class="widget-wrap">
<p class="textwidget redcolor">PARAGRAPH 4 INSIDE 2ND DIV.</p>
<p>PARAGRAPH 5 INSIDE 2ND DIV.</p>
</div>
CSS:
.widget-wrap .redcolor {
background-color: Red !important; /*use important if not works*/
}
so now all elements having class redcolor inside class widget wrap will be having background color red. you can use id or any other class name.
that will be more easier and best approach for than using the any other javascript etc.
It will add more css lines but that will not cause any harm to it.

Scalable CSS naming and sub classing

If you have a div which has various elements inside it, what would be a good way to show relationships and hierarchy when it comes to writing the CSS rules for this HTML:
<div class="tweet-general-item">
<p>Some summary text in here</p>
</div>
I'm wondering how to write and apply a style for the <p> element. This could be done in two ways:
.tweet-general-item-summary {
...
font-size: 12px;
}
With HTML like this <p class="tweet-general-item-summary">Some summary text here</p>
OR
.tweet-general-item .summary {
...
font-size: 12px;
}
With HTML like this <p class="tweet-general-item summary">Some summary text here</p>
Which way would be better/scalable/good-practice and why? I have to be able to show some level of hierarchy/relationship in the CSS. I can't simply have a style of .summary by itself because it has no semantic meaning to anyone - the designers/devs need to know what kind of summary it is just from reading the CSS.
Have a look at the BEM Methodology:
http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/
https://bem.info/method/
Your example would look like:
<div class="tweet">
<p class="tweet__summary"></p>
</div>

Indent all tags following h2 until next h2 is hit using CSS

In our project I'd like to style our doxygen output differently.
Currently the generated html looks like the following:
<html>
<body>
<h1> Heading 1 </h1>
<h2> Heading 2.1 </h2>
<p> Paragraph 2.1.1 </p>
<p> Paragraph 2.1.2 </p>
<p> Paragraph 2.1.3 </p>
<h2> Heading 2.2 </h2>
<p> Paragraph 2.2.1 </p>
<p> Paragraph 2.2.2 </p>
<p> Paragraph 2.2.3 </p>
</body>
</html>
The <h2> is only styled with a font-size attribute and all <h2> and <p> tags are aligned on the left side of the document.
To let the content below any <h2> tag stand out visually I would like to indent the tags until the next <h2> tag.
What I tried so far is the following CSS rule:
h2 + * {
margin-left: 10px;
}
The * is used since there are also other tags present besides <p> tags.
However, this rule only indents the first paragraph following the <h2> tag and not all tags up to the next <h2> tag.
It should also be mentioned that the structure of the html can not be changed to wrap each section inside of a <div> for example.
It sounds like you want to indent all siblings after the first h2 except other h2s, in which case this should do the job:
h2 ~ *:not(h2) {
margin-left: 10px;
}
See the general sibling combinator and the negation pseudo-class as well as a live demo on jsbin.
There's a couple of options of varying complexity, the first is:
h2 ~ *:not(h2) {
margin-left: 1em;
}
JS Fiddle demo.
This approach selects all following-sibling elements of an h2 that is not itself an h2.
The second is slightly simpler:
body {
padding-left: 1em;
}
body h2 {
margin-left: -1em;
}
JS Fiddle demo.
This approach does, essentially, mean that all content except the h2 will be indented; so it's not quite perfect for your use-case, but may be adaptable to your specific requirements).

How do I get whatever default style <h2> has, without having my text on a single line?

I realize that in the modern day, most people use CSS to perform styling, and will have CSS define what H2 looks like.
However, please imagine that I'm trying to make my text looks like it is the default appearance of <h2>, but have it on a line with other text.
Is it possible to do this in HTML4?
Alternatively, is it possible to emulate it using CSS?
Assume I am NOT setting a style on <h2> directly.
By default, all HTML headings (<h1> to <h5>) are displayed as block. This means a heading will be in a separate line if there is other elements surrounding it.
You can change that with CSS by applying display: inline to your heading. If you need it to keep some block behavior (like having a certain width, for example), you can use display: inline-block instead.
Give a try to that:
<!DOCTYPE html>
<html>
<body>
<style>
.h2{
font-size: x-large;
font-weight: bold;
display: inline;
}
</style>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p class="h2">This is heading 2</p>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>
And you should disable your current styles applying to the current h2.
For example: color: black !important; (if it's defined)
You can make the h2 display inline with the following CSS:
​h2 { display: inline; }​
Demo
You could just use a <span> on the text in question and add an h2 class to the span.
Example on jsfiddle
.header2{
font-size: 120%;
}​
The way to do it in HTML4 (which is what the question was primarily about) is to use two-cell table:
<table><tr valign=baseline><td><h2>Your heading</h2> <td>Other text</table>
Not many people would recommend this these days.
Note: The only way to ensure that the default rendering of h2 (which is browser-dependent, though tends to follow similar lines) is to refrain from using any CSS rule that could apply to an h2 element. I don’t see any particular reason to want to achieve that, though, perhaps on a page that discusses HTML rendering in browsers, or something similar.