I have an html element that can have either a child with id='slideshow'
<div id='content'>
<div id='slideshow'>
</div>
</div>
or a different child
<div id='content'>
<div id='other'>
</div>
</div>
I want to apply a style to #content only if it has a child #slideshow.
Is it possible?
Unfortunately this is not (yet?) possible in CSS alone. You can however do it with a couple of lines in jquery or almost any other javascript framework.
Related
I have a class that is used in multiple divs
<div class="wrapper">
<div class="child1">
...
</div>
</div>
<div class="wrapper">
<div class="child2">
...
</div>
</div>
<div class="wrapper">
<div class="child3">
...
</div>
</div>
Here, I want to add a style (let's just say color: red) to the wrapper class that has child2 as its child. I want to do this based on the name, not the order of the child. Any thoughts?
Right now, you can only achieve the behaviour you want using JavaScript.
Use JavaScript to select all .wrapper > .child2 elements and set the style of the parent wrapper element to what you want.
However, it might eventually be possible with CSS thanks to the :has pseudo-class. It is not currently supported by any major browsers but that could change soon!
In my html file, I wrote the code like this,
<body class="sign-in-body">
<div class="container sign-in-container">
<div class="row">
<div class="col"> </div>
<div class="col-8">
<div class="card">
<div class="card-block">
This is some text within a card block.
</div>
</div>
</div>
<div class="col"> </div>
</div>
</div>
I want to add a margin-top: 15% to my container class. To do that I wrote,
div.container.sign-in-container {
margin-top: 15%;
}
But the problem is if I add just,
.container.sign-in-container
it works.
Why is that?
The selector .container.sign-in-container will select any element that has both container and sign-in-container classes.
But div.container.sign-in-container will select only the div elements with both of the css classes.
Since you have only a div with both classes, both of the selectors work.
You should probably read about css selectors. This is a good reference to start.
In css you add only one class for css not necessary to add div.container.sign-in-container. This is also work in one class .sign-in-container. If you want to override css then you can use parent of div.
You are using a class level CSS selector. It will work. You can have multiple kinds of selectors and combinators in CSS to target the element on your page.
With your example
div.container.sign-in-container
div.sign-in-container
div.container
.container.sign-in-container
.container
.sign-in-container
all are going to target the same div, that is why it works.
How to organize the HTML structure and apply CSS. Which does not conflict with others CSS.
Which is the better way to apply the CSS to the targeted element?
Way 1:
.PARENT_1 .CHILD:first-child {
}
<div class="PARENT_1">
<div class="COMMON">
<div class="CHILD"></div> <!-- Targeted element -->
<div class="CHILD"></div>
</div>
</div>
Way 2:
.PARENT_1_CHILD_1 {
}
<div class="PARENT_1">
<div class="COMMON">
<div class="CHILD PARENT_1_CHILD_1"></div> <!-- Targeted element -->
<div class="CHILD"></div>
</div>
</div>
Any other way to improve CSS Specificity?
Can I use Bem Methodology?
If you want to apply CSS only to one element at a time, use an id for the element e.g.
if you target only one element wrapped inside a div, you can write it down in css like this: #divname > #something.a (when #something.a is first element inside the wrapper div) OR**
simply #divname #something.a - this will find the element with id anywhere inside the wrapper div.
Hope you got the point. :)
Here are css Methodologies you can find a depth explanation:
Examples of CSS Methodologies:
OOCSS, SMACSS, Idiomatic CSS and BEM
Title CSS Simple Approach CSS Class Naming
I am trying to make a CSS style for a website However in their HTML they do not use IDs for containers. Some of these containers have adverts, while others do not. I want to display:none the containers adverts. The adverts themselves have IDs, and so does the normal content.
This is what their HTML looks like:
<div id="wrapper">
<div class="container">
<div id="advert"> Advert </div>
</div>
<div class="container">
<div id="content"> Normal stuff </div>
</div>
<div class="container">
<div id="advert2"> Advert </div>
</div>
</div>
What you are referring to is selecting the ID's Parent in the DOM structure. You cannot do this with CSS at the moment but with CSS4 there should be a way to select a parent in the DOM. At the moment is is done with JQuery. To get the parent div for the 'advert' ID would be...
$( "#advert" ).parent().css( "display", "none" );
I have the following html structure
<div id="content">
<div id="transport">
<div id="header">Header Text</div>
<div id="image"></div>
<div id="right_content">Lots of text</div>
</div>
</div>
Is there a better way to arrange the css for the above rather than use ids for all of the divs?
IDs can only be used once in a document. Classes can be reused throughout the document. Styles attached to IDs trump styles attached to classes.
Other than that, it's entirely up to you and the particular content you are marking up.
Looking at your sample code, I would recommend using an actual header tag instead of a div with an ID of header.
Why not change those to classes and have only the top level container with an ID? That way you can target it with the top level ID.
You should also remove the header DIV and use a H2 or H3 tag.
<div id="content">
<div class="transport">
<h2>Header</h2>
<div class="image"></div>
<div class="right_content">Lots of text</div>
</div>
</div>
Your CSS would look like
#content .transport {}
#content h2 {}
#content .image