This question already has answers here:
Why use an HTML5 semantic tag instead of div? [duplicate]
(3 answers)
Why should I use 'li' instead of 'div'?
(15 answers)
Closed 3 years ago.
I am creating a skills section in my website which is rendering inline. I could render that using li instead of divs so what will be the advantage of li over div. I can render that easily by using div.
With Div:
.skills {
display:flex;
}
.skill
{
padding: 5px;
}
<div class="skills" style="--animState:playing;">
<div class="skill skill--code" style="--p:92%">
<div class="bar"></div>
<span>HTML5 CSS3</span>
</div>
<div class="skill skill--code" style="--p:83%">
<div class="bar">
</div>
<span>JavaScript</span>
</div>
<div class="skill skill--code" style="--p:65%">
<div class="bar"></div>
<span>NodeJS</span>
</div>
<div class="skill skill--code" style="--p:52%">
<div class="bar"></div>
<span>Java</span>
</div>
<div class="skill skill--soft" style="--p:87%">
<div class="bar"></div>
<span>Adobe Photoshop</span>
</div>
<div class="skill skill--soft" style="--p:62%">
<div class="bar"></div>
<span>Adobe Premiere</span>
</div>
<div class="skill skill--soft" style="--p:53%">
<div class="bar"></div>
<span>Adobe Illustrator</span>
</div>
</div>
ul.skills {
list-style:none;
display:flex;
}
.skills li
{
padding: 5px;
}
<section>
<ul class="skills">
<li>
Html Css
</li>
<li>
JS
</li>
<li>
PHP
</li>
</ul>
</section>
Both are giving the same results So what should i use and when should I use what?
Related
This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Closed 1 year ago.
I have the following css which works well, however, it executes all over my site which uses a CMS, so I'm trying to write a selector that only executes on example-widget when example-content is present. As you can see they are in two separate sections.
The widget works well everywhere on the site except one page where the above example-content is present, so I was just trying to fix this one page
#media(max-width: 767.5px) {
#content > div > div.row.component.column-split .example-content {
padding-left: 30px;
}
#content > div > div.row.component.column-split .example-widget{
margin-left: 30px;
}
}
<div class="row component column-split">
<div class="col-sm-8">
<div class="row">
<div class="component rich-text">
<div class="component-content">
<section class="example-content">
<p>Lorem Ipsum</p>
<br>
<p>Lorem Ipsum</p>
<br>
<span>Lorem Ipsum</span><br>
<span>Lorem Ipsum</span>
</section>
</div>
</div>
<section class="example-widget" id="example-widget">
<div class="widget-title">
<h3>Lorem Ipsum</h3>
</div>
</section>
</div>
</div>
<div class="col-xl-4">
<div class="row"></div>
</div>
</div>
There's still no parent selector in CSS, so you'll need to use javascript to check if the example-content element is present.
Here's a quick example using jQuery:
if ( $('.component-content').length > 0) $('.example-widget').addClass('highlight');
#media(max-width: 767.5px) {
#content > div > div.row.component.column-split .example-content {
padding-left: 30px;
}
#content > div > div.row.component.column-split .example-widget{
margin-left: 30px;
}
.highlight {
color: red;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row component column-split">
<div class="col-sm-8">
<div class="row">
<div class="component rich-text">
<div class="component-content">
<section class="example-content">
<p>Example content</p>
<br>
<p>Example content</p>
<br>
<span>Example content</span><br>
<span>Example content</span>
</section>
</div>
</div>
<section class="example-widget" id="example-widget">
<div class="widget-title">
<h3>Example widget</h3>
</div>
</section>
</div>
</div>
<div class="col-xl-4">
<div class="row"></div>
</div>
</div>
This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Closed 3 years ago.
I have this html structure:
<div>
<div class="parent">
<div>
<div class="label">
<div class="xyz"></div>
</div>
</div>
</div>
<div class="parent">
<div>
<div class="label">
</div>
</div>
</div>
</div>
I want to hide the parent if it is contains div with class="xyz"
I tried that:
.parent div.xyz {
display: none;
}
but seems like my selector does not work.
You can Hide the parent element with the following jquery
jQuery('.parent').each(function(){
if (jQuery(this).find('div.xyz').length != 0) {
jQuery(this).closest('.parent').hide();
}
});
Hope it will helpful.
In css, there's no parent element selector. In your case, you can use jquery to achieve the solution.
$('.parent:has(.xyz)').addClass('hide');
.hide {
visibility: hidden;
}
div.xyz .parent {
display: none;
}
<div>
<div class="xyz">
<div class="parent">
<div>
<div class="label">
<div class="xyz"></div>
</div>
</div>
</div>
</div>
<div class="parent">
<div>
<div class="label">
</div>
</div>
</div>
</div>
You can not select an ancestor, just descendants, an example of how you could do is like this:
<div class="xyz">
<div class="parent">
<div class="label">
<div class="xyz"></div>
</div>
</div>
<div class="parent">
<div class="label">
</div>
</div>
</div>
div.xyz .parent {
display: none;
}
in this case you will hide both .parent class
See more about descending selector
to select a parent or element inside another wapper you will need to use javascript
This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Closed 5 years ago.
I'm not sure if this can be done entirely with CSS (imperative), but it's halfway working at the moment. I have this current HTML setup:
<div class="content">
<div>
<div class="image"></div>
</div>
<div class="text"></div>
<div class="text"></div>
<div>
<div class="button"></div>
</div>
<div>
<div class="image"></div>
</div>
</div>
My current CSS hides all of the child elements of ".content" that don't have a class.
.content > *:not([class]):first-child {
display:block;
}
Of the remaining 3 visible class child elements of ".content", I need to hide them all except the first child element that has the grandchild element with the ".image" class. This is the CSS I have, but it's not working:
.content > *:not([class]):not(.image):first-child {
display:block;
}
It's imposible on CSS. You tryed not show parent element by attribute of child. CSS so does not work. But you can small js for this:
document.querySelector(".image").parentNode.style.display = "block";
.content>div {
display: none;
}
<div class="content">
<div>
<div class="image">1</div>
</div>
<div class="text">2</div>
<div class="text">3</div>
<div>
<div class="button">4</div>
</div>
<div>
<div class="image">5</div>
</div>
</div>
Andrey’s answer is good, however if you don’t want to use JS I think you will need to have a class on the intermediary children as well since the entire tree to the element you want must be visible. That is, if any parent of the element you want to show is hidden then the children will be too. Something like this might do:
<div class="content">
<div>
<div class="image"></div>
</div>
<div class="text"></div>
<div class="text"></div>
<div>
<div class="button"></div>
</div>
<div class="visible">
<div class="image"></div>
</div>
</div>
.content > * {
display: none;
}
.content > .visible {
display: block;
}
This question already has answers here:
Which characters are valid in CSS class names/selectors?
(11 answers)
Closed 8 years ago.
I might have been staring at the computer screen too long today and looked over something small but why can I not target these individual cells? (a1, a2, a3, etc...)
<div class="row-a">
<div class="a">
<div class="1"></div>
sdf
</div>
<div class="a">
<div class="2"></div>
</div>
<div class="a">
<div class="3"></div>
</div>
<div class="a">
<div class="4"></div>
</div>
<div class="a">
<div class="5"></div>
</div>
<div class="a">
<div class="6"></div>
</div>
<div class="a">
<div class="7"></div>
</div>
<div class="a">
<div class="8"></div>
</div>
<div class="a">
<div class="9"></div>
</div>
<div class="a">
<div class="10"></div>
</div>
</div>
CSS:
div.row-a div.a div.1 {
border: 1px solid green;
margin-left: 5px;
margin-top: 5px;
background-color:red;
height: 50px;
width: 50px;
}
jsFiddle: http://jsfiddle.net/tuHLE/
You can't begin a class name with a digit, which is why your code is not working.
See Which characters are valid in CSS class names/selectors?.
Edit: Well, ok, not exactly. Technically, you can begin a class name with a digit. In fact, you can use almost anything as a class name (except NUL). However, if you use a class name that begins with a digit, you will have to escape it in your CSS. For example, to select your class="1" div, you could do the following:
.row-a .a .\31 {...}
See http://mathiasbynens.be/notes/css-escapes for more information.
This question already has answers here:
CSS: Vertical column layout without <table>
(3 answers)
Closed 9 years ago.
I have the below html code. What I need to do is split wuiInPageNav into two sections. LeftArea and wuiMainPageNav and they need to be side by side all the time. LeftAre div will hold my jstree nodes and wauiMainPageNave div will hold my charts and data etc. When I do the following, left goes left and wuiMainPageNav goes to the right. But when I resize the browser window, make it smaller, wuiMainPageNave goes down to the botttom. How do I make sure that LeftArea is always on the left and wuiMainPageName is always on the right, regardles of the browser window and size?missing here. Any ideas?
div id="wuiLeftArea">
<div id="wuiLefthandNavRoot">
<h2 class="wui-hidden">Section Navigation</h2>
<h3 class="wui-navigation-title">Applicaion</h3>
<div id=tree></div>
</div>
</div>
<div id=wuiMainArea>
<div id=wuiMainContent>
<div id=wuiInpageNav>
<div id="top_chart" class="center"> </div>
</div>
</div>
</div>
css:
#wuiInpageNav {left:300px; float:right; width:1200px !important; overflow:hidden; }
div#wuiLeftArea{
float: left;
width: 16.25em;
background-color: #f2f4f5;
padding-top: .5833em;
position: relative;
}
UPDATE
Make sure you don't do your CSS inline:
http://jsfiddle.net/FE79R/1/
HTML
<div id=wuiMainArea>
<div id=wuiMainContent>
<div id=wuiInpageNav>
<div id="left">
<div id="tree">tree</div>
</div>
<div id=main>
<div id="top_charts" class="center"> </div>
<div class="main1">
<div id="top_chart1" class="center">top chart 1</div>
<div id="top_chart2" class="center">top chart 2</div>
</div>
</div>
</div>
</div>
</div>
</div>
CSS
#wuiInpageNav { width:300px; overflow:hidden; }
#left { width:100px; float:left; position:relative; background-color:#f2f4f5;}
#main { width:200px; float:left; background-color:orange;}