Difference between these selectors [duplicate] - html

This question already has answers here:
Why are spaces used to separate things in css
(3 answers)
Closed 9 years ago.
Is there any difference between these selectors?
div.demo and div .demo
div#demo and div #demo
Does it select the same element?
div.demo{some code}
div .demo{some code}

Yes, there is.
div.demo will match a div with class demo
<div class="demo">
div .demo will anything with class demo inside any div:
<div>
<span class="demo">
</div>
Same with the id selector #.

div.demo
will select div with class demo whereas
div .demo
will select any descendant of a div with class demo. Same concept for the second case.

Related

How to apply css on a div that has no class or id? [duplicate]

This question already has answers here:
Is there a CSS selector for element without any class?
(1 answer)
Can I write a CSS selector selecting elements NOT having a certain class or attribute?
(10 answers)
Closed 2 years ago.
I have two div and I want to apply some css on the first div that has no class or id .How can I do it ??
Html:
<div>some content</div>
<div class="text-1">
You can use the :not() selector:
div:not([class]) {
color: red;
}
<div>some content</div>
<div class="text-1">some more</div>
Basically this says select any div that doesn't have the class attribute.

Select only children of a div but not grandchildren using CSS [duplicate]

This question already has answers here:
Is there a CSS selector for the first direct child only?
(8 answers)
CSS selector for targeting only immediate children and not other identical descendants
(2 answers)
Closed 4 years ago.
I am trying to select only children of a div using CSS.
HTML:
<div class="wrapper">
<div>Child
<div>GrandChild</div>
</div>
<div>Child</div>
<div>Child</div>
</div>
CSS:
.wrapper div:first-child {
display: inline-block;
}
Fiddle: https://jsfiddle.net/781vcf4L/3/
The above CSS applies the CSS property only to a grandchild. I removed the :first-child part and it applies the property to all divs (children and grandchild).
This is what I am trying to achieve:
<div class="wrapper">
<div style="display: inline-block">Child
<div>GrandChild</div>
</div>
<div style="display: inline-block">Child</div>
<div style="display: inline-block">Child</div>
</div>
How can I apply the CSS property to children only?
A space between two selectors is the descendant combinator which, unsurprisingly, selects all descendants including children and grandchildren.
Replace it with the child combinator (>) which selects only children.

Select an element only when it has a child with a specific class [duplicate]

This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Closed 6 years ago.
I have this markup:
<div class="container page-content">
</div>
normally the class page-content has a padding:
.container.page-content{
padding-top: 160px;
}
But at a specific page there is a class "item-pagehome" inside my div:
<div class="container page-content">
<div class="item-pagehome">
Some Content ...
</div>
</div>
And in this special case I want to disable the padding-top of the .page-content. But how can I do this?
I try to select:
.page-content:has(> .item-pagehome){
padding-top: 0px;
}
But this does not working ...
How can I select a div only when it is a specific child class, in this
case .item-pagehome?
.container.page-content .item-pagehome {
margin-top: -160px;
}
It cannot be done using CSS.
CSS is Cascading Style Sheet (cascading: from top to bottom). You can only effect the last element in the CSS selector.
The condition you are looking for can be done using JavaScript, but this is outside the scope of your question.

Select tag which meets a condition [duplicate]

This question already has an answer here:
Find tags using css selector but not their descendants
(1 answer)
Closed 7 years ago.
I'm quite new in css selectors and I'm trying to do this:
I have a html with multiple divs. I want to select the first div meeting some condition, let's say div[id*='ample'] and then, select all divs with the same condition, but not the first divs children.
<div id="example1">
<div id="example2">
</div>
</div>
<div id="example3">
</div>
So the thing I want is to get the div whose id='example1' and id='example3'.
The best would be if for example the div with id='example3' doesn't have to be the first divs brother.
Do you know how to do that?
I was thinking about:
div = css_select("div[id*='ample')")
while True:
divs.append(div)
div = div + css_select("div[id*='ample')")
But it's probably worthless.
You have many ways to select elements in JavaScript, it's depends on the html.
Back to your question: you can do it by using the parent of those divs (the body for example)
NodeList.prototype.forEach = Array.prototype.forEach;
/* 'body > *[id*="ample"]' - you can replace the 'body' selector with other parent selector */
document.querySelectorAll('body > *[id*="ample"]').forEach(function(el) {
el.classList.add('red');
});
div {
height:10px;
border:1px solid #000;
}
.red {
border:1px solid red;
}
<div id="example1">
<div id="example2">
</div>
</div>
<div id="example3">
</div>

Difference between these two CSS selectors [duplicate]

This question already has answers here:
Are "div > p" & "div p" same?
(2 answers)
What’s the difference between the CSS selectors “div p” and “div > p”? [duplicate]
(5 answers)
Closed 9 years ago.
What is the difference between the selectors div.red > p and div.red p?
Please point to the key difference between these CSS selectors.
HTML
<div class="red"><p></p><div class="blue"><p></p></div>
Does the first selector select only the first <p> element?
div > p
This will select only p elements that are a child of div
div p
This will select all descendent (i.e. children, children's children etc) p elements of a div
See here for more info.
The easiest way of explaining that is to just make a simple DEMO.
HTML
<div id="id">
<p>First text</p>
<div>
<p>Second text</p>
</div>
</div>
CSS
div#id > p { background: red; }
div#id p { color: green; }
Only the first text has red background, because > takes only p that is direct child of div#id. The second one is not matched because there is another div between div#id and p.
However, they both are green, because div#id p matches all p that are descendant to div#id, no matter how deep in the Document Object Model.
The first selector says "All p tags that are a direct child of div". The second says "All p tags inside of div, regardless of whether they are children, grandchildren" and so on.
Consider the following HTML:
<div>
<p>1</p>
<p>
<p>2</p>
<p>3</p>
</p>
<p>4</p>
</div>
<p>5</p>
div > p will only select direct descendants: 1, 4 and the one with the p elements nested in it.
div p will select all p tags within a div: 1 2 3 4.