Using Elementor I have a current HTML structure as per the below;
<div class="carousel-post">
<div class="elementor-element-overlay">
<div class="elementor-widget-container">
<div class="elementor-posts-container">
</div>
</div>
</div>
</div>
I need to reference the class "elementor-posts-container" therefore, I have added class "carousel-post".
In my CSS I want to display "elementor-posts-container" as FLEX however, only this DIV which is under "carousel-post".
CSS
.carousel-post, .elementor-posts-container
The above works but targets all .elementor-posts-container
***** Just an Explanation *****
Adding this as an answer since I am not able to add formatting.
It should be .carousel-post .elementor-posts-container. Remove the comma.
When the code is .carousel-post, .elementor-posts-container, with the comma (,) it means match either of the two.
When you remove the comma (,), it means match the child within the parent. -->>> This will match your usecase
To get a direct match of the direct parent-child relationship (when you need it in the future), do .carousel-post > .elementor-posts-container. This matches all the ".elementor-posts-container" divs directly within ".carousel-post".
***** EDIT *****
Doesn't this work:
.carousel-post .elementor-posts-container{
display: flex;
}
The above code means, all ".elementor-posts-container" inside ".carousel-post" should be "display flex".
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.
So, I have been using my own CSS class named myclass and Bootstrap built-in class container. My question is while declaring a with both classes.
Should I use
<div class="myclass container">some code</div>
this format, or:
<div class="myclass">
<div class="container">
some code
</div>
</div>
Does both work in the same way? Or these two are different?
They are different, first one you have 2 classes for the same element, and you can select the element by using the following rules:
.container {}
.myclass{}
.myclass.container{} or .container.myclass{}
The second example you have a parent and a child elemtns
which you can use the following rule:
.myclass .container {}
Both are totally different.
<!-- Here you're declaring ONE div element with two values on class atribute -->
<div class="myclass container">some code</div> this format
<!-- Here you're declaring TWO elements with a different class each one -->
<div class="myclass">
<div class="container">
</div>
</div>
Why this is so different?
HTML tags/eelements have default properties with default values, plus the properties and values that you put in addition.
For example:
if you set globally:
div{padding:5px;}
On the first example, the content inside the div will be padded 5px.
On the second example, the content inside container will be padded 10px.
That can happen with default properties rendered by the browser or globally applied by frameworks as bootstrap.
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 have the following HTML snippet:
<div id="result-1">
<div class="page">
<div class="collapsingblock">
<h4>Click Me</h4>
</div>
<div class="collapsingblock collapsed">
<h4>No, Click Me</h4>
</div>
</div>
</div>
What I'm trying to do, is to find the second collapsingblock and it's h4
I have the following:
(//div[#id="result-1"]/div[#class="page"]/div[#class="collapsingblock"])[2]/h4
My xPath doesn't return the element. If I replace it with [1] it finds the first instance of collapsingblock though
Any ideas?
Thanks
UPDATE:
I have just noticed, that the HTML is using JavaScript to add/remove an additional class to the second collapsingblock, which collapsed
The problem is that the value of the class attribute of the second inner div element is not equal to "collapsingblock", as you can see:
<div class="collapsingblock collapsed">
<h4>No, Click Me</h4>
</div>
Even though class has very clear-cut semantics in HTML, it does not mean anything special to XPath, it's an attribute like any other.
Use contains() to avoid this problem:
(//div[#id="result-1"]/div[#class="page"]/div[contains(#class,"collapsingblock")])[2]/h4
Then, the only result of the expression above is
<h4>No, Click Me</h4>
By the way, parentheses around the lefthand part of the expression are not necessary in this case:
//div[#id="result-1"]/div[#class="page"]/div[contains(#class,"collapsingblock")][2]/h4
will do exactly the same, given this particular input document.
the parenthesis is necessary because of priority :
(//div[#id="result-1"]/div[#class="page"]/div[#class="collapsingblock"])[2]/h4
I have a menu with links in the following form, in which I am trying to highlight the current menu item. I can't seem to get it working. Please advice as to what I am doing wrong
HTML
<body id="home">
<div id="topMenu">
<div class="nav-home" id="topMenuBlock"><p>Home</p></div>
<div id="nav-about"><p>About</p></div>
<div id="nav-rates"><p>Rates</p></div>
<div id="nav-faq"><p>FAQ</p></div>
<div id="nav-contact"><p>Contact</p></div>
<div id="nav-careers"><p>Careers</p></div>
</div>
<div id="rightTopMenu"></div>
</div>...other stuff</body>
Then for the CSS I have the following:
#home a.nav-home{ border-bottom:2px solid white; }
Do the links HAVE to be in a List, or can I leave them in div's, and if so, how can I make this work?
Thanks.
You've a little bit of a mess here.
Do the links HAVE to be in a List, or can I leave them in div's?
They don't have to be, but they probably should be. There's not good reason to use the strange markup you have chosen, you should definitely consider switching to a list and <li> tags.
Problem with duplicate ids
You have <body id="home"> and <a href="" id="home">
You also have several instances of id="topMenuBlock" (I see you fixed this in your edit.)
You cannot have more than one element with the same id. id attributes must be unique, always. Use class names instead, if anything.
You are using this selector: #home a.nav-home {} but it doesn't match anything. There is no <a class="nav-home">. You can use something like:
#home {} because that's the id of the <a> element you want
.nav-home a {} - Selects the <a> inside an element with class="nav-home"
Perhaps you have the concept of ids and classes mixed up. Ids are supposed to uniquely identify HTML elements, whereas classes can be used as many times as you like. Right now you have 6 elements with the id #topMenuBlock. You should make a .topMenuBlock class instead. I would also make a #nav-home id instead of a class since there should only be one such element on each page.
Secondly, there is no need for the <p> tags you have within your <a> tags. In fact, it's against HTML standards to do so since anchors are inline elements and paragraphs are block-level elements.
Lastly, your CSS selector that sets the border is incorrect because the .nav-home div is not contained within an <a> element. Use this CSS instead (assuming you change nav-home to be an id rather than a class):
#nav-home{ border-bottom:2px solid white; }
Fix these issues and then see what happens. If you're new to HTML and CSS, I would recommend going through some tutorials, such as the ones found at http://www.w3schools.com/.
Your class identifier should be in the <a /> tag
You have
<div class="nav-home" id="topMenuBlock"><p>Home</p></div>
but you want
<div class="something" id="topMenuBlock"><a class = "nav-home" href="" id="home"><p>Home</p></a></div>
Modify your CSS class accordingly.