Selecting strangely nested elements - html

I can't seem to find a situation similar enough that I can figure out a solution. Without changing the html and adding classes and ids how can I select the a tag and the pre tag from the following code? I've included my attempts.
div.info p.c6 span a {
background-color: red;
}
p.c6 span pre {
background-color: blue;
}
<div class="info">
<h1 class="c4">
<a name="h.6q469n2havqi"></a><span>Title</span>
</h1>
<p class="c6">
<span>
<pre>
words
</pre>
<br>
Top of Page
<br>
</span>
</p>
</div>

Because the p element can only contain phrasing content, and in this case it contains flow content, the browser is closing the element and invalidating your selectors.
In short, the pre element is flow content and cannot be contained inside a p element. Therefore, the browser is overriding your HTML structure to maintain valid mark-up. Here's what it looks like:
The browser has essentially converted your p descendants into p siblings.
You need to restructure your HTML for your selectors to work.
If you can't change the HTML, a sibling selector will work.

Related

Is there a way to apply css for child only and not grandchild?

I want to provide a padding of 30px to p element inside the div element. But I don't want that padding to be applied to the img tag inside p.
<div class="desc">
<p>first paragraph</p>
<p><img src="....."></p>
<p>second paragraph</p>
</div>
I have attached the required result below.
You can use the > selector.
div > p { padding: 30px; }
It applies the styling only on the direct child elements (= direct descendants)
As #Khaaytil stated, you can use > between selectors.
Look here for more reference > direct descendant selector
For different scenarios u can see these 2 also:
Using + adjacent sibling selector
Using ~ non-adjacent sibling selector
Also you can try :only-child Selector
But as best practice you should really not wrapping images in a tag. Just put the image between the 2 tags, or wrap it in another tag.

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

CSS properties don’t work for paragraphs with pre elements inside

I have a paragraph that contains a <pre> element and some text, like the following:
<p class="par1">
<pre>
this is second paragraph
ok
ok
</pre>
These text are inside the paragraph must be RED
</p>
And I have used the following code to change the background color of the paragraph, but it doesn’t affect the paragraph and I don’t know why.
<style>
.par1{
background-color:red;
color:green;
}
</style>
Here’s the whole code:
<!doctype html>
<html>
<head>
<title>Test id and class attribute</title>
<style>
.par1 {
background-color: red;
color: green;
}
</style>
</head>
<body>
<div class="div1">
Some text
<h1>An important heading</h1>
<p class="par1">
<pre>
this is second paragraph
ok
ok
</pre>
This text is inside the paragraph and it must be red.
</p>
</div>
</body>
</html>
I know that if I use the class of the div .div1, it works fine, but I want to know why the first one doesn’t work.
.div1{
background-color:red;
color:green;
}
As per W3c specs say, you can't have a pre inside a p
4.4.1 The p element
Content model:
Phrasing content.
Where Phrasing Content is:
Phrasing content is the text of the document, as well as elements that
mark up that text at the intra-paragraph level. Runs of phrasing
content form paragraphs.
a
abbr
area (if it is a descendant of a map element)
audio
b
bdi
bdo
br
button
canvas
cite
code
data
datalist
del
dfn
em
embed
i
iframe
img
input
ins
kbd
keygen
label
map
mark
math
meter
noscript
object
output
progress
q
ruby
s
samp
script
select
small
span
strong
sub
sup
svg
template
textarea
time
u
var
video
wbr
you can use instead a span and setting it as display:block which will make it a block level element
.par1 {
background-color: red;
color: green;
display: block
}
<div class="div1">
Some text
<h1>An important heading</h1>
<span class="par1">
<pre>
this is second paragraph
ok
ok
</pre>
These text are inside the paragraph must be RED
</span>
</div>
as #dippas said, it's about the <pre>-tag inside a <p>-tag
<p>-tags can not contain block-level elements. as <pre> is a block-level element, browsers seem to close the <p>-tag, before the <pre>-tag opens (see your browser inspector). thus the styles on <p> could not be inherited by the <pre>-tag
for a good discussion with helpful hints, see:
<pre> tag making browsers close paragraphs
EDIT:
In the W3C specs, it is said that "A paragraph is typically a run of phrasing content (...)".
https://www.w3.org/TR/html5/dom.html#paragraphs

Is it possible to override <strong> properties within a CSS class only?

I want to create a div that contains three words, and I want one of the words in the div to be emphasized in a different font and size. Is it possible to override the default <strong> in that div's class so that I can just use, for example, hello there <strong> world for the word "world" to be emphasized differently to the other "strong-ed" words that aren't in the div?
You can set styles to strong tags:
strong{
font-weight:normal;
}
Use another selector before strong to apply it to strong tags inside certain tags.
I would recommend changing it from strong to the inline element <span>. This will give you all the control you need.
<div id="myid">hello there <span>world</span></div>
#myid span {properties:values}
Don't forget to ad in which container you are. So you can still use <strong> element elsewhere.
<div id="container">
hello there <strong> world </strong>
</div>
#container strong
{
font-weight: normal;
color: red;
}

How to select span element inside multiple div classes and id's?

I always wondered how can you select an element that is deeply buried in other elements that have classes and id's ?
For example :
<div class="container" id="footer">
<div class="sixteen columns"><span>some text here</span>
If I want to select element then what I would do is write in CSS the following :
.container #footer .sixteen .columns span {
font-weight: bold;
}
Unfortunately it seems that this method is not valid or recognized by browsers.
Let's say that I don't want to give any general styles to 'sixteen columns' class or span itself. I just want to apply very specific styles to this very specific element.
How should I select that span element ?
Given your code:
<div class="container" id="footer">
<div class="sixteen columns"><span>some text here</span>
</div><!-- I've chosen to close the opened div element -->
Your selector cannot work, but it is definitely "recognized by browsers." The problem is that it is not, as you say, 'valid' (for the HTML structure that you have).
The problem is that, in CSS, white-space implies an ancestor-descendant relationship, so:
E F
Selects an element, matching selector F, that is a descendant of selector E; your own selector:
.container #footer .sixteen .columns span
selects a <span> element, within an element of class 'columns', within an element of class 'sixteen', within an element of id="footer" itself within an element of class 'container'; giving HTML:
<element class="container">
<element id="footer">
<element class="sixteen">
<element class="columns">
<span></span>
</element>
</element>
</element>
Which bears no resemblance to your own HTML. As white-space establishes an ancestor-descendant relationship, the corollary is that no white-space implies the same element, which is what you were aiming for, I think. Omitting the white-space, then, gives the following selector:
#footer.container .sixteen.columns span {
/* CSS here */
}
This selector is, probably, overly complex (given that an id uniquely identifies an element1), and could be re-written as simply:
#footer .sixteen.columns span {
/* CSS here */
}
Or even, if you're willing, and able, to sacrifice some specificity:
#footer span {
/* CSS here */
}
Note that a class-name is often used in JavaScript to denote a state, state-change or interaction of some kind; so it's not definitively redundant to combine an id with a class (#footer.container), but if the class is not dynamically added or removed, it probably is redundant and unnecessary. As with all things in web-development, it's worth experimenting to find out what works for you; contemporary browsers are fast enough for the most part, that adding a class-name to the selector isn't going to slow things down substantially, but beware of time-critical use-cases, when it's best to remove everything that's not absolutely necessary.
References:
CSS Selectors (and combinators).
with:
#footer > .sixteen.columns > span
Your selector does not work because you have spaces between selectors which refer to the same element.
e.g. .container #footer
But the space reads: "find an element with the id footer that is a descendant of an element with a class that is container". But you mean: "find an element that has the class container AND the id footer" which you can do by concatenating them without a space:
e.g. .container#footer
See: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Selectors
Rearrange your selector like this
#footer.container .sixteen.columns span {
font-weight: bold;
}
<div class="container" id="footer">
<div class="sixteen columns">
<span>some text here</span>
</div>
</div>
#footer span { font-weight: bold; }