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"
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 working on a webpage and I have an issue, I've created a css function for my image
#my_linkedin {
background: url("../img/linkedin.png");
}
but my isssue is that when I'm calling the class in my HTML, the image doesn't appear.
<div class="col-lg-4 ml-auto text-center mb-5 mb-lg-0">
<a onclick="window.open(this.href,'_blank');return false;" class="my_linkedin" href="https://www.linkedin.com" target="_self"></a>
</div>
My file is called creative.css and I also have the same file but minified. The issue is that on the webpage, the css are coming from the minified file, so how can I import my css who's coming from the creative.cssplease ? Because I don't want to have to put it in the minified one.
Thanks.
In this case you can have 2 problems.
First - link just empty and it width and height are equals to 0. So you cant see you backdround.
Second - I can see that you are using #my_linkedin as a selector which means that you is searching by id, replace to .my_linkedin.
You want .my_linkedin { ... }. # is for writing styles to match elements with matching id="..." attributes. . is for classes.
Some errors here.
You are referring to a css rule, not function.
You are defining a css rule for a specific id, but on your html your element don't have an id, instead it have a class.
#someid {
color: red;
}
.someclass {
color: green
}
<p class="someid">BLACK</p>
<p class="someclass">GREEN</p>
<p id="someid">RED</p>
<p id="someclass">BLACK</p>
Your problem isn't related to whether or not the file is minified. Your selector applies to an element with id="my_linkedin, but your HTML doesn't have such an element. You can either change class="my_linkedin to id="my_linkedin" or you can change the CSS selector to read .my_linkedin
In CSS you don't call that a function. The #my_linked part is called a selector and the stuff inside the curly braces are called properties. Likewise, you can't call anything in CSS as you would in a programming language.
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'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
I have some classes that are used for Styling and all of them display using block mode.. I would like to convert them all to inline.. Is there a simple way to convert them all to inline, instead of manually going to each class to convert them individually to inline...
Section of your code:
<div class="contentbody">
<p>
Register here!
</p>
<a href="{% url 'parent_register_step1' %}"
class="bbutton textshadowclass boxshadow">
<div class="boxshadowinset green">
Register
</div>
</a>
<p>
Forgot your password?
</p>
<a href="{% url 'parent_forgot_password' %}"
class="bbutton textshadowclass boxshadow">
<div class="boxshadowinset green">
Reset Password
</div>
</a>
</div>
I would like to change the classes bbutton, textshadowclass, box shadow, boxshadowinset green into inline.. What is the simplest way?
Note: This classes are used in other sections of the page. I would like to change the certain section to be inline only. It shouldn't affect the whole page...
Let me explain more in detail what i am doing:
I would like to convert this into inline such that the register and reset password appear on the same line...
To only select the classes that are instead the contentbody class, you need a CSS element>element Selector:
div.contentbody>.bbutton, div.contentbody>.textshadowclass, ... {
display: inline;
}
(add more classes to the list if you want others included as well)
Additional note: If you permanently need these classes to be inline, then I would suggest to just (once) going to each class and add an inline class to each element, this keeps your code clearer in the long run.
Edit:
use the union selector (sorry I cannot find a more official link) to select elements that have multiple classes set:
div.contentbody>.boxshadowinset.green {
display: inline;
}
Note the . (and no space) between boxshadowinset and green
I do believe this is supported by modern browsers, but IE6 does seem to have some problems with it.
One way is just to apply an id to your wrapping element.
<div class="contentbody" id="contentbody">
Then in your css, add the styling
div#contentbody a, div#contentbody div{ display: inline; }
Due to CSS Element Hierarchy, they will all take the inline style rather than their own style.
Basic example here. http://jsfiddle.net/H97c5/2/