Here's the HTML,
<body class="home page page-id-13">
<div class="targetthis">
</div>
</body>
I want to target the class "targetthis" only when the body class has both "home" and "page" on it.
Try this
body.home.page .targetthis
by removing the spaces you are saying that you want an element with both classes, and by using the body, you are saying you are wanting the body element with both classes
If you only want targetthis as the direct child then you need to add the >
More info on multiple class / id selectors
Use both the classes in your target CSS selector like below.
body.home.page .targetthis
{
background-color:red;
}
DEMO
You could just write
firstClass.secondClass.thirdClass .childNodeClass
https://css-tricks.com/multiple-class-id-selectors/
Related
In the context of .NET MVC (but that could also apply to other similar technologies), let :
A tree of views, e.g the page view FileUploadPage and its child partial view FileDropZone that would have a class identifying their view "type" on their root node :
FileUploadPage.cshtml :
<div class="view-fileuploadpage">
<h2>File upload page view</h2>
#Html.Partial("FileDropZone")
</div>
FileDropZone.cshtml :
<div class="view-filedropzone">
File drop zone partial view
</div>
Some CSS rules which I would like to apply only to the view's own elements instead of globally :
Like this :
.view-fileuploadpage h2 {
/* Spécific to the view FileUploadPage */
}
But NOT like this :
h2 {
/* Global, not what I want */
}
I like this way of doing things, because it prevents interferences from other pages in the CSS due to needlessly global selectors.
However there is a problem with that : the view-specific CSS rules apply to the view's own elements, but also to any other view that is being included as a child view. In the example above, the view FileDropZone inherits the rules that are supposed to be specific to the view FileUploadPage, which is an undesired consequence.
So my question is : how can I make the CSS rules that are supposed to be specific to my views own elements NOT apply to the child views as well ?
I could use the "direct child" opeartor in my selectors to specify the full "path" to the elements I want to style, like so :
.view-fileuploadpage > h2 {
/* Applies to the h2 of the view FileUploadPage */
/* DOes NOT apply to any h2 that would exist in a child view of FileUploadPage */
}
But this would make the code hard to maintain, because the selectors would have to be updated everytime a piece of markup gets moved or modified within a view.
I'm having the exact same problem with JavaScript and query selectors, but I guess finding a solution for CSS would also solve the JavaScript problem.
Thank you.
You can use the :not() pseudo-class to deselect grandchildren within a particular child.
.view-fileuploadpage h2:not(.file-drop-zone *):not(.more-children *){
color: #f00;
}
This assigns the color to all h2 elements excluding those in the stated classes within the :not() selector.
The CSS file will need to be updated with the classes of new children if any.
The best solution will be to wrap all the contents of the view-fileuploadpage or parent div that should not get the styling and use the class of this wrapper as a single selector. This way, the file will not need constant updating all future children and grandchildren are added within the wrapper.
Hence, instead of having:
<div class='view-fileuploadpage-one'>
<h2>Container</h2>
<p>...</p>
<div class='file-drop-zone'>
<h2>file drop zone</h2>
...
</div>
<div class='more-children'>
<h2>More children</h2>
...
</div>
</div>
You can opt for:
<div class='view-fileuploadpage-two'>
<h2>Container</h2>
<p>...</p>
<div class='content-wrapper'>
<!-- this wrapper will contain everything else -->
<div class='file-drop-zone'>
...
</div>
<div class='more-children'>
...
</div>
</div>
</div>
</div>
Which will be more or less:
<div class='view-fileuploadpage-two'>
...
<div class='content-wrapper'>
...
</div>
</div>
Kindly see my idea on this pen.
I'm using the following HTML code:
<div class="p-col-fixed" style="width:150px">First line:</div>
For column alignment, I have to use width:150px in many places on the same HTML page.
How can I use a #define? In CSS?
I think you are comparing the scripting language with one of the programming languages that use the #define directive.
In CSS, we have class selector for that (in case you need to use that property on multiple places in the HTML.Class selectors are defined by placing a (.) dot before the name of the class selector and are used by specifing them as a value to the class attribute.
E.g.
CSS
.cust-width
{
width:150px;
}
HTML
<div class="p-col-fixed cust-width">First line:</div>
Another feature is the "id" which is used to further refine the selection and add additional properties to the selected class.IDs are generally used in cases when the change is required in fewer classes/tags.IDs are defined using (#) before the name of ID selector in CSS
E.g.
CSS
#cust-width
{
width:150px;
}
HTML
<div class="p-col-fixed" id="cust-width">First line:</div>
For your use-case, classes are ideal.Provided that change is required in multiple parts of the HTML.
Html:
<div class="p-col-fixed define">First line:</div>
css:
.define
{
width:150px;
}
Why go in all that trouble? Simple solution is to create a CSS class and use it anywhere you need in your html file.
CSS
.width-150 {
width: 150px;
}
HTML
<div class="p-col-fixed width-150">First line: </div>
You can create a class in css and then add it in the div.
css file:
.width150 {
width:150px;
}
Then, in your html file add the class
<div class="p-col-fixed width150 " >First line:</div>
Use class if you want to add style to multiple elements.
Use id if you want to style only one element.
The best approach would be to add a class to the element first
Example : custom-width
HTML:
<div class="p-col-fixed custom-width">First line:</div>
CSS :
.custom-width
{
width:150px;
}
It's been confusing for a week and I'd already search through google but still it didn't clear my mind what's the difference between these two, any clear answer?
The <div> is a tag that defines a division or a section in an HTML document.
The <div> tag is used to group block-elements to format them with CSS.
<div>
<p>This is paragraph.</p>
</div>
class is defined in css, where we define what will be the styling of a tag with this class name. (stylingForDiv is name of class used in this exmaple).
.stylingForDiv{
background-color: black;
color: white;
margin: 20px 0 20px 0;
padding: 20px; }
Inorder to apply styles of a css class (stylingForDiv in this example) to a div tag we need to associate css class with div tag which is done by using class attribute in div tag.
<div>
<p>This is paragraph the same paragraph but styled using rules defined in stylingForDiv class .</p>
</div>
So, Div is a tag of HTML whereas class is attribute of HTML tag which is use to style HTML tag according to rule described in class defined in css.
unlike like <div> , class can not be written in angle bracket as it is not HTML tag.
The tag defines a division or a section in an HTML document.
The element is often used as a container for other HTML elements to style them with CSS or to perform certain tasks with JavaScript.
Whilst the class is used to select any html elements and the element can be given a class example
Div :
The <div> tag defines a division or a section in an HTML document.
<div>
<h2>London</h2>
<p>
London is the capital of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.
</p>
</div>
Class :
The HTML class attribute makes it possible to define equal styles for elements with the same class name.
<div class="cities">
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</div>
The ***<div> element*** is very often used together with CSS, to layout a
web page.
while
The HTML class attribute makes it possible to define equal styles for
elements with the same class name.
<div> is a container tag whereas class is an attribute.
A class can be used in any tag, and any number of tags.
class is nothing but a name to css so that it can be used everywhere, without writing same styles everywhere. It works in the same way as a function in any programming language. It improves re-usability of code.
A container can have multiple space separetd classes, as class = "cls1 cls2"
Read more about class and div.
For example:
<div class= "mt5">
<input type= "text" class="mt5" />
</div>
Where mt5 is class (can be named anything) that represents margin-top:5px (to be defined initially).
This is very simple.
When you create a div element you can use it only once, eg.
<div id="container">
</div>
and you cannot use the div element two or more times, but there is a class element that you can use many times, eg.
<class id="container">
</class>
<div id="container2">
</div>
<class id="container">
</class>
To refer to div in css you have to use a hash:
#container
{
...
}
To refer to class in css you have to use a dot:
.container
{
...
}
I think that I helped.
is an HTML tag where as class is an attribute which can be assigned to any HTML tag including div tag.
For example :
<div class="firstDiv">First 1</div>
<div class="firstDiv">First 2</div>
<div class="secondDiv">Second</div>
If you are familiar id attribute, a HTML document can contain an ID only once where multiple tags can contain same class name.
Here is a simple explanation:
Also tag like <class> does not exist. So, this as per HTML standards is not valid : <class>hello</class>
In the CSS, a class selector is a name preceded by a full stop (“.”) and an ID selector is a name preceded by a hash character (“#”). The difference between an ID and a class is that an ID can be used to identify one element, whereas a class can be used to identify more than one.
A is a tag, and it's used to group elements that belong together, it's like a box, whereas, class is an attribute, you use it like class="blah", it helps you style elements together, if you have more than one div and you want to style them the same way, they'll all be like:
A div is a container tag that is used to define a division or a section in an HTML document, whereas a class is an attribute that specifies actions to be taken to one or more elements.
When using a class in CSS you have to specify the HTML elements you want it to affect by using a dot(.) and this can be done for multiple elements whereas while styling divs in CSS, you have to style each div separately.
I am working with the TN3 gallery (jquery slide show) and tried to change a class name to one that I found easier to understand. Thing is the class name that is within the div is different than the class name that controls it in the .css file? I am confused as I have never seen this before? I have only ever named a div class the same name as the class in my css code? Example is here:
<div class="tn3 description">
and in the .css file the class that controls this div is:
.tn3-image-description{Code here}
So my question is how can a differently named class work???
For me I understand the following:
<div class="description">
.description{Code here}
Interesting and I am keen to understand how this works as I have not seen things done this way before!
This div is using multiple (2) separate classes: tn3 and description.
Also check if any of the other CSS files are imported in the original css. This is usually done with #import url("another.css"); syntax, so you can search for #import statements.
Classes Are Only Conditions
<div class="a b"></div>
<style>
.a {color:blue;} /*The style only need to match a element with class "a"*/
.a.b {color:red;} /*The style need to match a element with class "a" AND "b"*/
</style>
Turns out that .a.b has overwritten .a and the div's text is in red.
e.g. no.2
<div>
<div class="c x"></div>
<div class="c"></div>
<div class="x"></div>
</div>
using .c.x {} will only style "c x"
I'm working in a content management system that allows me limited (no) access to the stylesheets, but does allow me to insert CSS into certain templates. So I have this:
<div class="inside_widget">
<div class="input"><span class="form_label">Form stuff</span></div>
<div class="input"><span class="form_label">Form stuff</span></div>
<div class="input"><span class="form_label">Form stuff</span></div>
etc...
</div>
Where inside_widget, input, and form_label are all defined in a sheet I can't touch. I want to put some custom CSS on "form_label" without having to touch every single span.
I tried using the style attribute in the containing div, but that did not work.
<div class="inside_widget" style=".form_label {color:#FFFFFF;}" >
Note: I want to retain everything else in the inside_widget styling, and not have to define a whole new class.
I think what the OP is trying to achieve is not having to repeat the style="" attribute for every single <span> in his form.
This can be done by simply adding your own class name to the enclosing div's classes:
<div class="inside_widget myclass" ...>
<!-- ... -->
</div>
Then make your own secondary stylesheet and define myclass:
.myclass span
{
color: #ffffff;
}
You can put this secondary CSS either in a <style> tag in the HTML itself, or in its own CSS file linked in.
You could do it this below.
<span class="form_label" style="color:#FFFFFF;">Form Stuff</span>
Inline styles like this will overwrite any css rules in a stylesheet, unless in the stylesheet they have a rule with !important
you do not know css right? will look like
<div class="inside_widget" style="color:#FFFFFF;" >
but I suggest you create a new css file and add whatever you want in the same