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>
Related
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?
I am having trouble selecting the first and last div for the following html markup:
<div class="layout__side">
<div class="portlet-dropzone">
<div id="id1">
<span></span>
<div class="portlet-body">
<div class="portlet-borderless-container">
<div class="portlet-body">
<article id="id2">
<div class="inner">
<header>yoyoyoyoyoyoy</header>
</div>
</article>
</div>
</div>
</div>
</div><!--end id1 div-->
<div id="id3">
<span></span>
<div class="portlet-body">
<div class="portlet-borderless-container">
<div class="portlet-body">
<article id="id4">
<div class="inner">
<header>yoyoyoyoyoyoy</header>
</div>
</article>
</div>
</div>
</div>
</div><!--end id3 div-->
<div id="id5">
<span></span>
<div class="portlet-body">
<div class="portlet-borderless-container">
<div class="portlet-body">
<article id="id6">
<div class="inner">
<header>yoyoyoyoyoyoy</header>
</div>
</article>
</div>
</div>
</div>
</div><!--end id5 div-->
<div id="id7">
<span></span>
<div class="portlet-body">
<div class="portlet-borderless-container">
<div class="portlet-body">
<article id="id8">
<div class="inner">
<header>yoyoyoyoyoyoy</header>
</div>
</article>
</div>
</div>
</div>
</div><!--end id7 div-->
<div id="id9">
<span></span>
<div class="portlet-body">
<div class="portlet-borderless-container">
<div class="portlet-body">
<article id="id10">
<div class="inner">
<header>yoyoyoyoyoyoy</header>
</div>
</article>
</div>
</div>
</div>
</div><!--end id9 div-->
<div id="id11">
<span></span>
<div class="portlet-body">
<div class="portlet-borderless-container">
<div class="portlet-body">
<article id="id12">
<div class="inner">
<header>yoyoyoyoyoyoy</header>
</div>
</article>
</div>
</div>
</div>
</div><!--end id11 div-->
</div><!--end portlet-dropzone-->
</div><!--end layout__side-->
I am trying to select and style only the id1 div header without explicitly selecting it using the div id. I tried using the div:first-child selector, but all of the divs are being selected! This is what I tried, along with using nth-child(1)
.layout__side .portlet-dropzone div:first-child header{
padding: 10px;
border: 1px solid red;
}
The problem is that you're selecting all div descendant elements that are a first child.
In other words, the descendant div elements .portlet-borderless-container, .portlet-body, and .inner are selected (since they are descendants of .portlet-dropzone and they are the first child relative to their parent element). Since all the div elements are selected, each header element is thereby selected and styled.
You need to select the direct child div element instead (by using the direct child combinator, >). In doing so, only the div element that is a direct child of .portlet-dropzone will be selected if it is the first child.
Example Here
.layout__side .portlet-dropzone > div:first-child header {
padding: 10px;
border: 1px solid red;
}
As your title suggests, if you also want to select the last one:
Updated Example
.layout__side .portlet-dropzone > div:first-child header,
.layout__side .portlet-dropzone > div:last-child header {
padding: 10px;
border: 1px solid red;
}
It's also worth pointing out that there are :first-of-type and :last-of-type pseudo classes which will select the first/last element by type (unlike :first-child/:last-child which will select based on the index only rather than the type).
Updated Example
.layout__side .portlet-dropzone > div:first-of-type header,
.layout__side .portlet-dropzone > div:last-of-type header {
padding: 10px;
border: 1px solid red;
}
This may be useful if there are elements of varying types and you only want to target the div elements. For instance, if there was a random h1 element before the first div, like in the example above, the first div would still be selected.
I really want full width colour blocks to represent different sections of my webpage.
I am using bootstrap 3 to build my website. The website is in a container from the standard bootstrap but I would liked some of the sections to be colouful blocks that span the full browser windows.
Does anyone know how this is done and can post an example please?
What you need to do is to place the container within another tag. The tag should be the one taking up the entire width of the page with css background attribute. In this case, I have chosen the html5 "section" tag. Below is an example. You can take a look at this jsfiddle
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 3 - Full width coloured blocks</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<style type='text/css'>
.colored-block {
width: 100%;
padding: 30px 0px;
color: #fff;
}
.purple { background: purple; }
.green { background: green; }
.blue { background: blue; }
</style>
</head>
<body>
<section class="colored-block purple">
<div class="container">
<h1>Header 1</h1>
<p>Paragraph content goes here</p>
</div>
</section>
<section class="colored-block green">
<div class="container">
<h1>Header 2</h1>
<p>Paragraph content goes here</p>
</div>
</section>
<section class="colored-block blue">
<div class="container">
<h1>Header 3</h1>
<p>Paragraph content goes here</p>
</div>
</section>
</body>
</html>
Here is a jsfiddle
This should help you to understand your problem. 3 section made like red, green ,blue.
<div class="row">
<div class="col-md-4 ">
<p class=text-danger> red color</p>
</div>
<div class="col-md-4 ">
<p class=text-success> green color</p>
</div>
<div class="col-md-4 ">
<p class=text-primary> blue color</p>
</div>
</div>
Here is a jsfiddle, 3 columns, full height with background colors.
jsfiddle
CSS:
html,body,.container-fluid
{
height:100%;
}
.container
{
display:table;
width: 100%;
}
.row
{
height: 100%;
display: table-row;
}
.col-md-4, .col-xs-4
{
display: table-cell;
float: none;
}
.red{background:red;}
.green{background:green;}
.blue{background:blue;}
HTML
<div class="container">
<div class="row">
<div class="red col-xs-4 col-md-4">.col-xs-4 .col-md-4</div>
<div class="blue col-xs-4 col-md-4">.col-xs-4 .col-md-4</div>
<div class="green col-xs-4 col-md-4">.col-xs-4 .col-md-4</div>
</div>
</div>
You can easily achieve full-width coloured sections in Bootstrap by using 'container-fluid' instead of 'container'.
Example:
CSS:
.red{background:red;}
.green{background:green;}
.blue{background:blue;}
HTML:
<div class="container-fluid">
<div class="row">
<div class="red col-xs-12">.col-xs-12 .col-sm-12 .col-md-12 .col-lg-12</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="blue col-xs-12">.col-xs-12 .col-sm-12 .col-md-12 .col-lg-12</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="green col-xs-12">.col-xs-12 .col-sm-12 .col-md-12 .col-lg-12</div>
</div>
</div>
Once between the div tags, an HTML tag (eg headings, breaks), the contents are no longer align the same. Example: Html.DisplayFor (...) should end always justified. How can this be fixed?
<div class="table">
<div class="row">
<div class="cell">
<h3>Heading 1</h3>
<hr />
<div class="row">
<div class="cell">Label 1</div>
<div class="cell">Html.DisplayFor(...)</div>
</div>
<div class="row">
<div class="cell">Label 2 with much more Text</div>
<div class="cell">Html.DisplayFor(...)</div>
</div>
<br />
<h3>Heading 2</h3>
<hr />
<div class="row">
<div class="cell">Label 3 with Text</div>
<div class="cell">Html.TextBoxFor(...)</div>
</div>
</div>
<div class="cell">
...
</div>
</div>
</div>
CSS:
div .table {
display: table;
width: 100%;
}
div .cell {
display: table-cell;
padding: 0.3em;
}
div .row {
display: table-row;
}
It should actually look more like this (red line):
Its because you break the flow of the layout by not adhering to only using a table->row/cell structure but by injecting div and hr elements in the middle of it.
You could simply add a width to the first column:
.row .cell .row .cell:first-child{
width:200px;
}
Demo Fiddle
I have a problem with my css. I cant get the div-children of my "round"-classes to fill their parent.
http://jsfiddle.net/ubJxJ/10/
To be even more clear: I want the divs to align for a bracket-setup. F.x. "Match #17"s center is the same as the center of "Match #1" and "Match #2".
CSS:
#cup { display:table; }
#headlinecontainer, #roundcontainer { display:table-row; }
#headlinecontainer div {
display:table-cell;
text-align:center;
}
#roundcontainer .round {
display:table-cell;
vertical-align:middle;
background-color:#F00;
overflow:hidden;
}
#roundcontainer .round div.match { background-color:#0F0; }
HTML:
<div id="cup">
<div id="headlinecontainer">
<div>Round of 32</div>
<div>Round of 16</div>
<div>Quarter</div>
<div>Semi</div>
<div>Final</div>
</div>
<div id="roundcontainer">
<div class="round ro32">
<div class="match">Match #1</div>
<div class="match">Match #2</div>
...
<div class="match">Match #15</div>
<div class="match">Match #16</div>
</div>
<div class="round ro16">
<div class="match">Match #17</div>
...
<div class="match">Match #24</div>
</div>
<div class="round quarter">
<div class="match">Match #25</div>
<div class="match">Match #26</div>
<div class="match">Match #27</div>
<div class="match">Match #28</div>
</div>
<div class="round semi">
<div class="match">Match #29</div>
<div class="match">Match #30</div>
</div>
<div class="round">
<div class="match">Match #31</div>
</div>
</div>
</div>
Thanks in advance
I think I understand what you are looking for: a typical bracket setup.
However, it seems you have already achieved that!
Look at my screenshot of your jfiddle:
What browser are you using? How does it look for you? (I am using Chrome).